@bonniernews/dn-design-system-web 3.0.0-alpha.33 → 3.0.0-alpha.35

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 3.0.0-alpha.35 (2023-04-27)
+
+
+### Features
+
+* **web:** large and standard teasers ([#763](https://github.com/BonnierNews/dn-design-system/issues/763)) ([0713caa](https://github.com/BonnierNews/dn-design-system/commit/0713caa3c451419e21b185496d8d77726c972bfd))
+
+
+
+## [3.0.0-alpha.34](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.33...@bonniernews/dn-design-system-web@3.0.0-alpha.34) (2023-04-26)
+
+
+### Bug Fixes
+
+* **web:** button accessbility ([#767](https://github.com/BonnierNews/dn-design-system/issues/767)) ([1b19f98](https://github.com/BonnierNews/dn-design-system/commit/1b19f983f208ab3467640b8f921e8f711f569ab5))
+* **web:** vip-badge square top-right corner ([#771](https://github.com/BonnierNews/dn-design-system/issues/771)) ([19e2753](https://github.com/BonnierNews/dn-design-system/commit/19e275397f5d9ac7a16703141c0c5372ee1f0e02))
+
+
+
 ## 3.0.0-alpha.33 (2023-04-24)
 
 

package/assets/teaser/sticker.scss

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

package/assets/teaser/teaser.scss

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

package/components/button/button.njk

@@ -1,75 +1,70 @@
 {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
 {% from '@bonniernews/dn-design-system-web/components/spinner/spinner.njk' import Spinner %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro Button(params) %}
-  {% set componentClassName = "ds-btn" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
-  {% set text = params.text %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
-
-  {% set buttonVariant = params.variant | default("primary") %}
-  {% set variant = (variant.push(classNamePrefix + buttonVariant), variant) %}
+  {%- set componentClassName = "ds-btn" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set text = params.text %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  {%- set ariaLabel = 'aria-label="' + text + '"' if not params.attributes["aria-label"] else "" %}
+  {%- set buttonVariant = params.variant | default("primary") %}
+  {%- set additionalClasses = (additionalClasses.push(classNamePrefix + buttonVariant), additionalClasses) %}
+  {%- set spinnerMap = { primary: "secondary", brand: "onBrand", business: "onBusiness", staticWhiteFilled: "staticBlack", staticWhiteOutlined: "staticWhite" } %}
+  {%- set spinnerVariant = spinnerMap[buttonVariant] | default("primary") %}
 
-  {% set spinnerMap = { primary: "secondary", brand: "onBrand", business: "onBusiness", staticWhiteFilled: "staticBlack", staticWhiteOutlined: "staticWhite" } %}
-  {% set spinnerVariant = spinnerMap[buttonVariant] | default("primary") %}
-
-  {% set loadingHtml %}
+  {%- set loadingHtml %}
     {{ Spinner({ size: 'small', variant: spinnerVariant, forcePx: params.forcePx }) }}
   {% endset %}
 
-  {% if params.loading %}
-    {% set variant = (variant.push("ds-loading"), variant) %}
+  {%- if params.loading %}
+    {% set additionalClasses = (additionalClasses.push("ds-loading"), additionalClasses) %}
   {% endif %}
 
-  {% 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.condensed %}
-    {% set variant = (variant.push(classNamePrefix + "condensed"), variant) %}
+  {%- if params.condensed %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "condensed"), additionalClasses) %}
   {% endif %}
 
-  {% if params.size and params.size != "default" %}
-    {% set variant = (variant.push(classNamePrefix + params.size), variant) %}
+  {%- if params.size and params.size != "default" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
   {% endif %}
 
-  {% if params.fullWidth %}
-    {% set variant = (variant.push(classNamePrefix + "full-width"), variant) %}
+  {%- if params.fullWidth %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "full-width"), additionalClasses) %}
   {% endif %}
 
-  {% if params.mobile and params.mobile.fullWidth %}
-    {% set variant = (variant.push(classNamePrefix + "mobile-full-width"), variant) %}
+  {%- if params.mobile and params.mobile.fullWidth %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "mobile-full-width"), additionalClasses) %}
   {% endif %}
 
-  {% if params.iconName and params.iconPosition and params.iconPosition != "none" %}
-    {% set variant = (variant.push(classNamePrefix + "icon" + "-" + params.iconPosition ), variant) %}
+  {%- if params.iconName and params.iconPosition and params.iconPosition != "none" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "icon" + "-" + params.iconPosition ), additionalClasses) %}
     {% set iconSvg =  Icon({ icon: params.iconName }) %}
   {% endif %}
 
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif%}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
-
-  {% if params.href %}
-    <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{- attributes | safe}}>
-      <div class="{{ componentClassName + '__inner'}}">
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  {%- if params.href %}
+    <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe}}>
+      <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
         <span>{{ text }}</span>
         {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-      </div>
+      </span>
     </a>
   {% else %}
-    <button type="{{ params.type | default('button') }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
-      <div class="{{ componentClassName + '__inner'}}">
+    <button type="{{ params.type | default('button') }}" {{ ariaLabel | safe }} class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
+      <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
         <span>{{ text }}</span>
         {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-      </div>
+      </span>
     </button>
   {% endif %}
 {% endmacro %}

package/components/button-toggle/button-toggle.js

@@ -9,6 +9,8 @@ function dsButtonToggle(toggleElements = []) {
     toggleEl.addEventListener("click", () => {
       if (toggleEl.classList.contains("ds-btn-toggle--disabled")) return;
       toggleEl.classList.toggle("ds-btn-toggle--selected");
+      const ariaChecked = toggleEl.getAttribute("aria-checked") === "true" ? "false" : "true";
+      toggleEl.setAttribute("aria-checked", ariaChecked);
     });
   });
 }

package/components/button-toggle/button-toggle.njk

@@ -3,63 +3,63 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro ButtonToggle(params) %}
-  {% set componentClassName = "ds-btn-toggle" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
-  {% set attributes = getAttributes(params.attributes) %}
+  {%- set componentClassName = "ds-btn-toggle" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  {%- set ariaLabel = 'aria-label="' + params.text + '"' if not params.attributes["aria-label"] else "" %}
 
-  {% if params.selected %}
-    {% set variant = (variant.push(classNamePrefix + "selected"), variant) %}
+  {%- if params.selected %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "selected"), additionalClasses) %}
   {% endif %}
 
-  {% set buttonVariant = params.variant | default("brand") %}
-  {% set variant = (variant.push(classNamePrefix + buttonVariant), variant) %}
+  {%- set buttonVariant = params.variant | default("brand") %}
+  {%- set additionalClasses = (additionalClasses.push(classNamePrefix + buttonVariant), additionalClasses) %}
 
-  {% set spinnerMap = { primary: "secondary", brand: "onBrand", business: "onBusiness" } %}
-  {% set spinnerVariant = spinnerMap[buttonVariant] | default("primary") %}
-  {% set spinnerSize = "xsmall" if params.size == "xsmall" else "small" %}
+  {%- set spinnerMap = { primary: "secondary", brand: "onBrand", business: "onBusiness" } %}
+  {%- set spinnerVariant = spinnerMap[buttonVariant] | default("primary") %}
+  {%- set spinnerSize = "xsmall" if params.size == "xsmall" else "small" %}
 
-  {% set loadingHtml %}
+  {%- set loadingHtml %}
     {{ Spinner({ size: spinnerSize, variant: spinnerVariant, forcePx: params.forcePx }) }}
   {% endset %}
 
-  {% if params.loading %}
-    {% set variant = (variant.push("ds-loading"), variant) %}
+  {%- if params.loading %}
+    {% set additionalClasses = (additionalClasses.push("ds-loading"), additionalClasses) %}
   {% endif %}
 
-  {% 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.size and params.size != "default" %}
-    {% set variant = (variant.push(classNamePrefix + params.size), variant) %}
+  {%- if params.size and params.size != "default" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
   {% endif %}
 
-  {% if params.fullWidth %}
-    {% set variant = (variant.push(classNamePrefix + "full-width"), variant) %}
+  {%- if params.fullWidth %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "full-width"), additionalClasses) %}
   {% endif %}
 
-  {% if params.condensed %}
-    {% set variant = (variant.push(classNamePrefix + "condensed"), variant) %}
+  {%- if params.condensed %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "condensed"), additionalClasses) %}
   {% endif %}
 
-  {% if params.mobile and params.mobile.fullWidth %}
-    {% set variant = (variant.push(classNamePrefix + "mobile-full-width"), variant) %}
+  {%- if params.mobile and params.mobile.fullWidth %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "mobile-full-width"), additionalClasses) %}
   {% endif %}
 
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif%}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
-
-  <button type="button" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
-    <div class="{{ componentClassName + '__inner'}}">
-      <div class="{{ componentClassName + '__off'}}"><span>{{ params.text }}</span></div>
-      <div class="{{ componentClassName + '__on'}}">
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  <button type="button" role="switch" {{ ariaLabel | safe }} aria-checked="{{ "true" if params.selected else "false" }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
+    <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
+      <span class="{{ componentClassName + '__off' }}"><span>{{ params.text }}</span></span>
+      <span class="{{ componentClassName + '__on' }}">
         {{ Icon({ icon: "check" }) }} <span>{{ params.selectedText }}</span>
-      </div>
+      </span>
       {{ loadingHtml | safe }}
-    </div>
+    </span>
   </button>
 {% endmacro %}

package/components/icon-button/README.md

@@ -32,7 +32,8 @@ These are copy paste friendly examples to quickliy get started using a component
 {{ IconButton({
   variant: 'outlined',
   size: 'default',
-  iconName: 'home-filled'
+  iconName: 'arrow_forward',
+  attributes: { 'aria-label': 'Nästa' }
 })}}
 ```
 

package/components/icon-button/icon-button.njk

@@ -27,7 +27,7 @@
   {% endif %}
 
   {% if params.iconName %}
-    {% set iconSvg =  Icon({ icon: params.iconName }) %}
+    {% set iconSvg =  Icon({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) %}
   {% endif %}
 
   {% set loadingHtml %}
@@ -51,13 +51,13 @@
   {% if params.href %}
     <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{- attributes | safe }}>
       {{- visuallyHidden | safe if visuallyHidden -}}
-      <span class="{{ componentClassName + '__inner'}}">{{- iconSvg | safe if iconSvg -}}</span>
+      <span class="{{ componentClassName + '__inner' }}">{{- iconSvg | safe if iconSvg -}}</span>
       {{ loadingHtml | safe }}
     </a>
   {% else %}
     <button type="button" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
       {{- visuallyHidden | safe if visuallyHidden -}}
-      <span class="{{ componentClassName + '__inner'}}">{{- iconSvg | safe if iconSvg -}}</span>
+      <span class="{{ componentClassName + '__inner' }}">{{- iconSvg | safe if iconSvg -}}</span>
       {{ loadingHtml | safe }}
     </button>
   {% endif %}

package/components/icon-button-toggle/icon-button-toggle.js

@@ -9,6 +9,8 @@ function dsIconButtonToggle(toggleElements = []) {
     toggleEl.addEventListener("click", () => {
       if (toggleEl.classList.contains("ds-icon-btn-toggle--disabled")) return;
       toggleEl.classList.toggle("ds-icon-btn-toggle--selected");
+      const ariaChecked = toggleEl.getAttribute("aria-checked") === "true" ? "false" : "true";
+      toggleEl.setAttribute("aria-checked", ariaChecked);
     });
   });
 }

package/components/icon-button-toggle/icon-button-toggle.njk

@@ -1,63 +1,55 @@
 {% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
 {% from '@bonniernews/dn-design-system-web/foundations/a11y/visually-hidden.njk' import VisuallyHidden %}
 {% from '@bonniernews/dn-design-system-web/components/spinner/spinner.njk' import Spinner %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 
 {% macro IconButtonToggle(params) %}
-  {% set componentClassName = "ds-icon-btn-toggle" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
-  {% set attributes %}
-    {% for attribute, value in params.attributes %}
-      {{attribute}}="{{value}}"
-    {% endfor %}
-  {% endset %}
+  {%- set componentClassName = "ds-icon-btn-toggle" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
 
-  {% if params.selected %}
-    {% set variant = (variant.push(classNamePrefix + "selected"), variant) %}
+  {%- if params.selected %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "selected"), additionalClasses) %}
   {% endif %}
   
-  {% 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.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 + "outlined"), variant) %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "outlined"), additionalClasses) %}
   {% endif %}
 
-  {% if params.size and params.size != "default" %}
-    {% set variant = (variant.push(classNamePrefix + params.size), variant) %}
+  {%- if params.size and params.size != "default" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.size), additionalClasses) %}
   {% endif %}
 
-  {% set loadingHtml %}
-    {{ Spinner({ size: "small", variant: "primary", forcePx: params.forcePx }) }}
+  {%- set loadingHtml %}
+    {{ Spinner({ size: "small", additionalClasses: "primary", forcePx: params.forcePx }) }}
   {% endset %}
 
-  {% if params.loading %}
-    {% set variant = (variant.push("ds-loading"), variant) %}
+  {%- if params.loading %}
+    {% set additionalClasses = (additionalClasses.push("ds-loading"), additionalClasses) %}
   {% endif %}
 
-  {% if params.a11y and params.a11y.visuallyHidden %}
+  {%- if params.a11y and params.a11y.visuallyHidden %}
     {% set visuallyHidden = VisuallyHidden({ text: params.a11y.visuallyHidden }) %}
   {% endif %}
 
-  {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif%}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
-
-  <button type="button" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  <button type="button" role="switch" aria-checked="{{ "true" if params.selected else "false" }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
     {{- visuallyHidden | safe if visuallyHidden -}}
-    <div class="{{ componentClassName + '__inner'}}">
-      <div class="{{ componentClassName + '__off'}}">
-        {{ Icon({ icon: params.iconName }) }}
-      </div>
-      <div class="{{ componentClassName + '__on'}}">
-        {{ Icon({ icon: params.selectedIconName }) }}
-      </div>
+    <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
+      <span class="{{ componentClassName + '__off' }}">{{ Icon({ icon: params.iconName }) }}</span>
+      <span class="{{ componentClassName + '__on' }}">{{ Icon({ icon: params.selectedIconName }) }}</span>
       {{ loadingHtml | safe }}
-    </div>
+    </span>
   </button>
 {% endmacro %}

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,6 +12,7 @@ $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;

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,22 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-teaser-image {
+  position: relative;
+  width: 100%;
+  margin: 0;
+
+  .ds-teaser-image__byline {
+    position: absolute;
+    bottom: ds-spacing-component($ds-sc-x2);
+    right: ds-spacing-component($ds-sc-x2);
+    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;
+    border-radius: ds-metrics-border-radius(x2);
+    z-index: 150;
+  }
+}