@bonniernews/dn-design-system-web 31.1.0 → 31.2.0

package/CHANGELOG.md

@@ -4,6 +4,55 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [31.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.1.3...@bonniernews/dn-design-system-web@31.2.0) (2025-03-26)
+
+
+### Features
+
+* **web:** byline redesign ([#1665](https://github.com/BonnierNews/dn-design-system/issues/1665)) ([a0151d5](https://github.com/BonnierNews/dn-design-system/commit/a0151d5487884219bcb7cc34f3bb0d285bcbe70b))
+
+
+### Maintenance
+
+* **deps-dev:** bump @babel/runtime from 7.26.9 to 7.26.10 ([#1658](https://github.com/BonnierNews/dn-design-system/issues/1658)) ([ddc2a6a](https://github.com/BonnierNews/dn-design-system/commit/ddc2a6ab0fa1603fe3728eb3d52e2125ac84c386))
+* **deps-dev:** bump axios from 1.7.9 to 1.8.3 ([#1662](https://github.com/BonnierNews/dn-design-system/issues/1662)) ([3973c15](https://github.com/BonnierNews/dn-design-system/commit/3973c15536a52a70d629a30c7b41e27f5c672b75))
+* **deps-dev:** bump shelljs from 0.8.5 to 0.9.2 ([#1664](https://github.com/BonnierNews/dn-design-system/issues/1664)) ([c9c7d3f](https://github.com/BonnierNews/dn-design-system/commit/c9c7d3fccb8becc4e42b61ff16000a4a8115b009))
+* **deps-dev:** bump style-dictionary from 4.3.2 to 4.3.3 ([#1644](https://github.com/BonnierNews/dn-design-system/issues/1644)) ([d1e8c22](https://github.com/BonnierNews/dn-design-system/commit/d1e8c22df91652382f5e7d994eb3a371e886bffa))
+* **deps:** bump @babel/helpers from 7.26.9 to 7.26.10 ([#1659](https://github.com/BonnierNews/dn-design-system/issues/1659)) ([c26c060](https://github.com/BonnierNews/dn-design-system/commit/c26c060896f7de866302dde2355d249e79e3e2c8))
+* **foundations:** update variables action ([#1669](https://github.com/BonnierNews/dn-design-system/issues/1669)) ([173c902](https://github.com/BonnierNews/dn-design-system/commit/173c9024860ad82ed2f47e6d5ef844b0f7dc174e))
+* **web:** fix failing gh actions ([#1671](https://github.com/BonnierNews/dn-design-system/issues/1671)) ([4c66ae1](https://github.com/BonnierNews/dn-design-system/commit/4c66ae1897d279483d74b5a69cce91cdd63663fc))
+
+## [31.1.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.1.2...@bonniernews/dn-design-system-web@31.1.3) (2025-03-18)
+
+## [31.1.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.1.0...@bonniernews/dn-design-system-web@31.1.2) (2025-03-18)
+
+
+### Bug Fixes
+
+* **web:** make room for photo credit on teasers with text on image ([#1666](https://github.com/BonnierNews/dn-design-system/issues/1666)) ([6e204fa](https://github.com/BonnierNews/dn-design-system/commit/6e204fa2f1fc0a53fc21a29bb006b56ae291ab60))
+* **web:** set exit with status 1 if failed to generate documentation ([#1668](https://github.com/BonnierNews/dn-design-system/issues/1668)) ([36c8d4a](https://github.com/BonnierNews/dn-design-system/commit/36c8d4afac9ac9b7e9adbd30c115a18a2dce6ebd))
+
+
+### Maintenance
+
+* remove vs code settings ([#1646](https://github.com/BonnierNews/dn-design-system/issues/1646)) ([bcf9f02](https://github.com/BonnierNews/dn-design-system/commit/bcf9f022b47cb018e2ac0a39e75104ab489df76a))
+* replace tj-actions ([#1663](https://github.com/BonnierNews/dn-design-system/issues/1663)) ([5122022](https://github.com/BonnierNews/dn-design-system/commit/5122022570c2547588cd3967d5aba3dba18f613a))
+* **web:** released version v31.1.1 ([5f3670c](https://github.com/BonnierNews/dn-design-system/commit/5f3670c1ca51740145b472f5c5f06b6516c4b32d))
+
+## [31.1.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.1.0...@bonniernews/dn-design-system-web@31.1.1) (2025-03-18)
+
+
+### Bug Fixes
+
+* **web:** make room for photo credit on teasers with text on image ([#1666](https://github.com/BonnierNews/dn-design-system/issues/1666)) ([6e204fa](https://github.com/BonnierNews/dn-design-system/commit/6e204fa2f1fc0a53fc21a29bb006b56ae291ab60))
+* **web:** set exit with status 1 if failed to generate documentation ([#1668](https://github.com/BonnierNews/dn-design-system/issues/1668)) ([36c8d4a](https://github.com/BonnierNews/dn-design-system/commit/36c8d4afac9ac9b7e9adbd30c115a18a2dce6ebd))
+
+
+### Maintenance
+
+* remove vs code settings ([#1646](https://github.com/BonnierNews/dn-design-system/issues/1646)) ([bcf9f02](https://github.com/BonnierNews/dn-design-system/commit/bcf9f022b47cb018e2ac0a39e75104ab489df76a))
+* replace tj-actions ([#1663](https://github.com/BonnierNews/dn-design-system/issues/1663)) ([5122022](https://github.com/BonnierNews/dn-design-system/commit/5122022570c2547588cd3967d5aba3dba18f613a))
+
 ## [31.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.0.1...@bonniernews/dn-design-system-web@31.1.0) (2025-03-13)
 
 

package/components/byline/README.md

@@ -1,33 +1,23 @@
 - GitHub: [BonnierNews/dn-design-system/../web/src/components/byline](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/byline)
 - Storybook: [Byline](https://designsystem.dn.se/?path=/docs/article-byline--docs)
-- Storybook (Latest): [Byline](https://designsystem-latest.dn.se/?path=/docs/article-byline--docs)
 
 ----
 
 # Byline
 
-The byline is a list item and should be wrapped in a list.
-
-* variant:'follow' can render both a button and a link
-
 ## Parameters
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|variant | String | yes | follow, link, direkt | | |
-|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 | | | Used in variant:link |
-|email | String | no | | | email will be displayed instead of role for variant:follow |
-|authorPageUrl | String | no | | | For variant:button an inner link can be used in combination with a button, for other variants an outer link is used |
-|followable | Boolean | no | true, false | true | If true the toggle button to follow will be shown when using variant:follow. |
-|followed | Boolean | no | true, false | false | If true the toggle button will be in "selected" state. Depends on followable parameter. |
+|largeByline | Boolean | no | true, false | false | Specify if web should render a large byline, used for profile articles |
+|bylineTitle | String | yes | | | The titles of the bylines, supplied by the api |
+|bylines | Array | yes | | | Array of bylines from api |
+|authorImages | Array[HTML] | no | | | Array with html image from bang. The component only makes the image round. Scaling is up to the user. Should be 44px for non retina screens. |
+|hideBylineImages | Boolean | no | true, false | true | Specify if byline images should be renderd or not |
+|renderBylineModal | Boolean | false | true, false | false | Specify if byline sheet should be renderd. Should be true for bottomByline |
+|showNameAsLink | Boolean | false | true, false | false | If true, author names will be renders as link and sheet will not load. Used for desktop |
 |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 |
-|linkAttributes | Object | no | | | Sets attributes on the link element. |
 |classNames | String | no | | | Ex. "my-special-class" |
-|elementClassNames | String | no | | | Sets classes on actual toggle element and not byline list item. Same structure as classNames above |
-|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
 
 ## Minimum requirement example
 
@@ -39,18 +29,15 @@ These are copy paste friendly examples to quickliy get started using a component
 {% from '@bonniernews/dn-design-system-web/components/byline/byline.njk' import Byline %}
 
 {{ Byline({
-  variant: variant,
-  bylineImage: imageHtml(),
-  authorName: authorName,
-  role: role,
-  email: email,
-  authorPageUrl: authorPageUrl,
-  followable: followable,
+  largeByline: largeByline,
+  bylineTitle: bylineTitle,
+  bylines: bylines,
+  authorImages: [imageHtml(), imageHtml(), imageHtml()],
+  hideBylineImages: hideBylineImages,
+  renderBylineModal: renderBylineModal,
   attributes: attributes,
-  elementAttributes: elementAttributes,
-  elementClassNames: elementClassNames,
-  classNames: "",
-  forcePx: false
+  classNames: classNames
+  variant: variant,
 })}}
 ```
 

package/components/byline/byline-interaction.js

@@ -0,0 +1,14 @@
+import { initModal, openModal } from '@bonniernews/dn-design-system-web/components/modal/modal.js'
+
+export function initModalByline() {
+  const modalEl = document.querySelector(".ds-modal--byline");
+  if (!modalEl) return;
+  initModal(modalEl);
+
+  const bylines = document.querySelectorAll(".ds-byline");
+  bylines.forEach(byline => {
+    byline.addEventListener("click", (e) => {
+      openModal(modalEl);
+    });
+  });
+}

package/components/byline/byline.njk

@@ -1,39 +1,112 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
-{% from '@bonniernews/dn-design-system-web/components/list-item/list-item.njk' import ListItem %}
+{% from '@bonniernews/dn-design-system-web/components/byline-list-item/byline-list-item.njk' import BylineListItem %}
+{% from '@bonniernews/dn-design-system-web/components/modal/modal.njk' import Modal %}
 
 {% macro Byline(params) %}
-  {% set useOuterAnchorElement = params.authorPageUrl and not params.followable %}
-  {% set useArrowIcon = true if (useOuterAnchorElement and params.variant !== 'direkt') %}
-  {% set useFollowButton = true if (params.variant == 'follow' and params.followable) %}
-
-  {% if params.variant == 'link' %}
-    {% set subtitle = params.role %}
-  {% elif params.variant == 'follow' %}
-    {% set subtitle = params.email %}
-  {% elif params.variant == 'direkt' %}
-    {% set subtitle = false %}
+  {% set componentClassName = "ds-byline" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set attributes = getAttributes(params.attributes) %}
+  {% set showBylineImages = params.hideBylineImages != true %}
+
+  {%- set largeByline = params.largeByline == true and params.bylines.length === 1 %}
+  {%- set classes = [
+    componentClassName,
+    componentClassName + "--large" if largeByline,
+    componentClassName + "--show-images" if showBylineImages,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+
+
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    {% if params.bylines.length === 1%}
+      {% set byline = params.bylines[0] %}
+      <div class="{{ componentClassName + '__inner'}}">
+        <div class="{{ componentClassName + ('__portrait--large' if largeByline else '__portrait') }}">{{ params.authorImages[0] | safe }}</div>
+        <div class="{{ componentClassName + '__info'}}">
+          <span class="{{ componentClassName + '__role'}}">{{ params.bylineTitle }}</span>
+          <a href={{ byline.authorPageUrl }} class="{{ componentClassName + '__name'}}"
+            data-link-category="article author"
+            data-id="{{ byline.authorId }}"
+            data-index="1"
+            data-label="{{ byline.name }}">
+            {{ byline.name }}
+          </a>
+        </div>
+      </div>
+
+    {% else %}
+      <div class="{{ componentClassName + '__inner'}} {{ componentClassName + '__inner--multiple'}}">
+        {% if showBylineImages %}
+          {% for image in params.authorImages %}
+            <div class="{{ componentClassName + '__portrait'}}">{{ image | safe }}</div>
+          {% endfor %}
+        {% endif %}
+
+        <div class="{{ componentClassName + '__info'}}">
+          <span class="{{ componentClassName + '__role'}}">
+            {{ params.bylineTitle }}
+          </span>
+          {% for byline in params.bylines %}
+            {% set isSecondToLast = loop.index == loop.length - 1 %}
+            {% set showComma = true if not isSecondToLast and not loop.last%}
+            {% if loop.last %}
+            <span class="{{ componentClassName + '__and'}}"> och </span>
+            {% endif %}
+            {% call AuthorName((params.showNameAsLink == true), byline, componentClassName, loop.index, showComma) %}
+              {{- byline.name -}}
+              {%- if showComma -%}, {%- endif -%}
+            {% endcall %}
+          {% endfor %}
+        </div>
+      </div>
+    {% endif %}
+  </div>
+
+  {% if params.bylines.length > 1 and params.renderBylineModal and params.showNameAsLink != true %}
+    {% call Modal({modalType: "sheet", classNames: "ds-modal--byline"}) %}
+      <ul class="ds-byline__list">
+        {% for byline in params.bylines %}
+          {{ BylineListItem({
+            variant: 'follow',
+            authorName: byline.name,
+            role: byline.role,
+            email: byline.email,
+            authorPageUrl: byline.authorPageUrl,
+            bylineImage: params.authorImages[loop.index0] | safe,
+            followable: byline.followable,
+            border: false if loop.last else true,
+            linkAttributes: {
+              "data-link-category": "article author",
+              "data-id": byline.authorId,
+              "data-index": loop.index,
+              "data-label": byline.name
+            },
+            elementClassNames: "watch--follow",
+            elementAttributes: {
+              "data-entity-id": byline.authorId,
+              "data-author": byline.name,
+              "aria-label": "Följ " + byline.name,
+              "data-interaction-category": "author"
+            }
+          }) }}
+        {% endfor %}
+      </ul>
+    {% endcall %}
   {% endif %}
+{% endmacro %}
 
-  {% set classNames = (params.classNames or '') + ' ds-byline--' + params.variant %}
-
-  {{ ListItem({
-    listItemType: 'byline',
-    title: params.authorName,
-    subtitle: subtitle,
-    mediaHtml: params.bylineImage,
-    trailingIcon: 'arrow_forward' if useArrowIcon,
-    toggleText: 'Följ' if useFollowButton,
-    toggleSelectedText: 'Följer' if useFollowButton,
-    selected: params.followed if useFollowButton,
-    href: params.authorPageUrl if useOuterAnchorElement,
-    titleHref: params.authorPageUrl if not useOuterAnchorElement,
-    linkAttributes: params.linkAttributes,
-    border: params.variant !== 'direkt',
-    fontWeight: 'semibold',
-    elementAttributes: params.elementAttributes,
-    elementClassNames: params.elementClassNames,
-    forcePx: params.forcePx,
-    classNames: classNames,
-    attributes: params.attributes
-  }) }}
+{% macro AuthorName(renderLink, byline, componentClassName, index, showComma) %}
+  {% if renderLink %}
+    <a href={{ byline.authorPageUrl }} class="{{ componentClassName + '__name'}}"
+      data-link-category="article author"
+      data-id="{{byline.authorId}}"
+      data-index="{{index}}"
+      data-label="{{byline.name}}">
+        {{- caller() -}}
+    </a>
+  {% else %}
+    <span class="{{ componentClassName + '__name'}}">
+      {{- caller() -}}
+    </span>
+  {% endif %}
 {% endmacro %}

package/components/byline/byline.scss

@@ -1 +1,120 @@
-@use "../../components/list-item/list-item.scss";
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/byline-list-item/byline-list-item.scss";
+@use "../../components/modal/modal.scss";
+
+$ds-list-item__portrait-size: 44px;
+$ds-list-item__portrait-size--small: 36px;
+$ds-list-item__portrait-size--large: 104px;
+
+.ds-byline {
+  padding: 0 0 ds-spacing($ds-s-100) 0;
+  border-bottom: ds-border-width(xxs) solid $ds-color-border-primary;
+  overflow: hidden;
+  max-width: 520px;
+  margin-top: ds-spacing($ds-s-100);
+
+  .ds-byline__inner {
+    display: flex;
+  }
+
+  .ds-byline__portraits {
+    display: flex;
+  }
+
+  .ds-byline__portrait {
+    border-radius: 50%;
+    background-color: $ds-color-surface-primary-raised-soft;
+    height: 100%;
+
+    .picture,
+    img {
+      border-radius: 50%;
+      width: $ds-list-item__portrait-size;
+    }
+
+    &:not(:first-of-type) {
+      position: relative;
+
+      :before {
+        box-sizing: border-box;
+        position: absolute;
+        content: "";
+        border: ds-spacing($ds-s-025) solid $ds-color-border-primaryinvert-strongest;
+        border-radius: 100%;
+        width: calc(100% + 8px);
+        height: calc(100% + 8px);
+        top: -4px;
+        left: -4px;
+      }
+    }
+  }
+
+  .ds-byline__info {
+    align-self: flex-end;
+    margin-left: ds-spacing($ds-s-100);
+
+    .ds-byline__role,
+    .ds-byline__name {
+      color: $ds-color-text-primary;
+    }
+
+    .ds-byline__role {
+      display: block;
+      @include ds-typography($ds-typography-functional-body-md);
+    }
+
+    .ds-byline__name,
+    .ds-byline__and {
+      @include ds-typography($ds-typography-functional-body-md, $fontWeight: $ds-fontweight-medium);
+    }
+
+    .ds-byline__name {
+      text-decoration-line: underline;
+      &:hover {
+        text-decoration-line: none;
+      }
+    }
+  }
+
+  .ds-byline__inner--multiple {
+    flex-wrap: wrap;
+
+    .ds-byline__info {
+      margin-left: 0;
+      width: 100%;
+    }
+  }
+
+  &.ds-byline--show-images {
+    .ds-byline__inner--multiple {
+      .ds-byline__info {
+        margin-top: ds-spacing($ds-s-100);
+      }
+    }
+  }
+
+  &--large {
+    position: relative;
+    display: flex;
+    padding-top: ds-spacing($ds-s-200);
+
+    .ds-byline__portrait--large {
+      position: absolute;
+      right: ds-spacing($ds-s-100);
+      top: 0;
+      background-color: transparent;
+      border-radius: 0;
+      width: $ds-list-item__portrait-size--large;
+    }
+
+    .ds-byline__info {
+      margin-left: 0;
+    }
+  }
+}
+
+.ds-byline__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

package/components/byline-list-item/README.md

@@ -0,0 +1,68 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/byline-list-item](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/byline-list-item)
+- Storybook: [Byline](https://designsystem.dn.se/?path=/docs/article-byline-list-item--docs)
+- Storybook (Latest): [Byline](https://designsystem-latest.dn.se/?path=/docs/article-byline-list-item--docs)
+
+----
+
+# Byline List Item
+
+The byline is a list item and should be wrapped in a list.
+
+* variant:'follow' can render both a button and a link
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|variant | String | yes | follow, link, direkt | | |
+|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 | | | Used in variant:link |
+|authorPageUrl | String | no | | | For variant:button an inner link can be used in combination with a button, for other variants an outer link is used |
+|followable | Boolean | no | true, false | true | If true the toggle button to follow will be shown when using variant:follow. |
+|followed | Boolean | no | true, false | false | If true the toggle button will be in "selected" state. Depends on followable parameter. |
+|border | Boolean | no | true, false | true | If false the border will not be shown. Used to remove border from the last item or direkt bylines  |
+|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 |
+|linkAttributes | Object | no | | | Sets attributes on the link element. |
+|classNames | String | no | | | Ex. "my-special-class" |
+|elementClassNames | String | no | | | Sets classes on actual toggle element and not byline list item. Same structure as classNames above |
+|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/byline-list-item/byline-list-item.njk' import BylineListItem %}
+
+{{ BylineListItem({
+  variant: variant,
+  bylineImage: imageHtml(),
+  authorName: authorName,
+  role: role,
+  authorPageUrl: authorPageUrl,
+  followable: followable,
+  border: border,
+  attributes: attributes,
+  elementAttributes: elementAttributes,
+  elementClassNames: elementClassNames,
+  classNames: "",
+  forcePx: false
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/byline-list-item/byline-list-item";
+```
+
+### Javascript
+
+```javascript
+import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button/button-interactions.js'
+const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
+dsButtonToggle(toggleElements);
+```

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

@@ -0,0 +1,36 @@
+{% from '@bonniernews/dn-design-system-web/components/list-item/list-item.njk' import ListItem %}
+
+{% macro BylineListItem(params) %}
+  {% set useOuterAnchorElement = params.authorPageUrl and not params.followable %}
+  {% set useArrowIcon = true if (useOuterAnchorElement and params.variant !== 'direkt') %}
+  {% set useFollowButton = true if (params.variant == 'follow' and params.followable) %}
+
+  {% if params.variant == 'direkt' %}
+    {% set subtitle = false %}
+  {% else %}
+    {% set subtitle = params.role %}
+  {% endif %}
+
+  {% set classNames = (params.classNames or '') + ' ds-byline-list-item--' + params.variant %}
+
+  {{ ListItem({
+    listItemType: 'byline',
+    title: params.authorName,
+    subtitle: subtitle,
+    mediaHtml: params.bylineImage,
+    trailingIcon: 'arrow_forward' if useArrowIcon,
+    toggleText: 'Följ' if useFollowButton,
+    toggleSelectedText: 'Följer' if useFollowButton,
+    selected: params.followed if useFollowButton,
+    href: params.authorPageUrl if useOuterAnchorElement,
+    titleHref: params.authorPageUrl if not useOuterAnchorElement,
+    linkAttributes: params.linkAttributes,
+    border: params.variant !== 'direkt' and params.border !== false,
+    fontWeight: 'semibold',
+    elementAttributes: params.elementAttributes,
+    elementClassNames: params.elementClassNames,
+    forcePx: params.forcePx,
+    classNames: classNames,
+    attributes: params.attributes
+  }) }}
+{% endmacro %}

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

@@ -0,0 +1 @@
+@use "../../components/list-item/list-item.scss";

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

@@ -280,7 +280,11 @@ $ds-list-item__portrait-size--small: 36px;
 }
 
 .ds-list-item--byline {
-  &.ds-byline--direkt {
+  .ds-list-item__subtitle {
+    text-transform: capitalize;
+  }
+
+  &.ds-byline-list-item--direkt {
     padding: ds-spacing($ds-s-075 0);
 
     .ds-list-item__portrait {

package/components/modal/modal.scss

@@ -133,9 +133,11 @@ body.no-scroll {
       height: 100%;
       max-width: 100%;
       width: 100%;
+      background-color: transparent;
     }
 
     .ds-modal__content {
+      box-sizing: border-box;
       position: absolute;
       bottom: 0;
       padding: ds-spacing($ds-s-100);

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

@@ -51,7 +51,7 @@
 
   .ds-teaser__text-content {
     position: absolute;
-    bottom: ds-spacing($ds-s-100);
+    bottom: ds-spacing($ds-s-200);
     left: ds-spacing($ds-s-100);
     max-width: 90%;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "31.1.0",
+  "version": "31.2.0",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",