@bonniernews/dn-design-system-web 3.0.0-alpha.9 → 3.0.0-alpha.90

package/components/image-caption/README.md

@@ -0,0 +1,38 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/image-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/image-caption)
+- Storybook: [ImageCaption > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-imagecaption-web--image-caption)
+
+----
+
+# ImageCaption
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|caption | String | no | | | Ex "Detta är en bildtext" |
+|imageType | String | no | | | Type of image. Ex "Foto" |
+|author | String | no | | | Ex "Paul Hansen" |
+|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/image-caption/image-caption.njk' import ImageCaption %}
+
+{{ ImageCaption({
+  caption: "En bildtext",
+  imageType: "Foto",
+  author: "Paul Hansen"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/image-caption/image-caption";
+```

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

@@ -0,0 +1,36 @@
+{% macro ImageCaption(params) %}
+  {% set macroClassName = "ds-image-caption" %}
+  {% set additionalClasses = [] %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif %}
+
+  {% if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
+  {% endif %}
+
+  {% set classes = macroClassName + " " + additionalClasses | join(" ") %}
+
+  <figcaption class="{{ classes }}" {{- params.attributes | safe }}>
+    {% if params.caption %}
+      <span aria-hidden="true">{{ params.caption | safe }}</span>
+    {% endif %}
+    {% if params.author %}
+      {% set authorText = ((params.imageType | capitalize) + ": " + params.author) if params.imageType else params.author %}
+
+      {% set authorClasses = [ "ds-article-image__credits" ] %}
+      {# Low estimate of how much will fit on tablet/desktop #}
+      {% if (authorText | length) >= 27 and (authorText | length) < 60 %}
+        {% set authorClasses = (authorClasses.push("ds-article-image__credits--nowrap-bigscreen"), authorClasses) %}
+      {# Low estimate of how much will fit on iphone4 #}
+      {% elif (authorText | length) < 27 %}
+        {% set authorClasses = (authorClasses.push("ds-article-image__credits--nowrap"), authorClasses) %}
+      {% endif %}
+
+      <span class="{{ authorClasses | join(" ") }}">
+        {{- authorText -}}
+      </span>
+    {% endif %}
+  </figcaption>
+{% endmacro %}

package/components/image-caption/image-caption.scss

@@ -0,0 +1,25 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-image-caption {
+  @include ds-typography($ds-typography-functional-body01regular);
+  margin-top: ds-spacing-component($ds-sc-x2);
+  color: $ds-color-text-primary;
+
+  @at-root .ds-force-px#{&} {
+    @include ds-typography($ds-typography-functional-body01regular, true);
+  }
+
+  > .ds-article-image__credits {
+    color: $ds-color-text-primary-02;
+
+    &.ds-article-image__credits--nowrap {
+      white-space: nowrap;
+    }
+
+    &.ds-article-image__credits--nowrap-bigscreen {
+      @include ds-mq-smallest-breakpoint(tablet) {
+        white-space: nowrap;
+      }
+    }
+  }
+}

package/components/list-item/list-item.njk

@@ -1,4 +1,4 @@
-{% 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/components/switch/switch.njk' import Switch %}
 {% from '@bonniernews/dn-design-system-web/components/checkbox/checkbox.njk' import Checkbox %}
 {% from '@bonniernews/dn-design-system-web/components/radio-button/radio-button.njk' import RadioButton %}
@@ -63,11 +63,11 @@
   {% endif %}
 
   {% if params.leadingIcon %}
-    {% set iconLeftSvg =  Icon({ icon: params.leadingIcon }) %}
+    {% set iconLeftSvg =  IconUse({ icon: params.leadingIcon }) %}
   {% endif %}
 
   {% if params.trailingIcon %}
-    {% set iconRightSvg =  Icon({ icon: params.trailingIcon }) %}
+    {% set iconRightSvg =  IconUse({ icon: params.trailingIcon }) %}
   {% endif %}
 
   {% if params.listItemType == "standard" or not params.listItemType %}
@@ -137,8 +137,8 @@
     </div>
   {% elif element == 'accordion' %}
     {% set iconRightSvg %}
-      {{ Icon({ icon: "expand_less" }) }}
-      {{ Icon({ icon: "expand_more" }) }}
+      {{ IconUse({ icon: "expand_less" }) }}
+      {{ IconUse({ icon: "expand_more" }) }}
     {% endset %}
     <button class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
       {{ caller() if caller }}

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

@@ -1,5 +1,5 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../../foundations/icons/icon.scss" as *;
+@use "../icon-sprite/icon-sprite.scss";
 @use "../checkbox/checkbox.scss" as *;
 @use "../switch/switch.scss" as *;
 @use "../radio-button/radio-button.scss" as *;
@@ -27,7 +27,6 @@ $ds-list-item__icon-size: 24px;
   .ds-list-item__inner {
     box-sizing: border-box;
     border-radius: 0;
-    transition: background-color 50ms ease-out;
     margin: 0;
     display: flex;
     align-items: center;
@@ -45,7 +44,6 @@ $ds-list-item__icon-size: 24px;
       left: 0;
       bottom: 0;
       right: 0;
-      transition: background-color 500ms ease;
     }
 
     .ds-icon {

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;
+  }
+}