@bonniernews/dn-design-system-web 17.0.0 → 18.0.0-beta.0

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [18.0.0-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@17.0.0...@bonniernews/dn-design-system-web@18.0.0-beta.0) (2024-08-13)
+
+
+### ⚠ BREAKING CHANGES
+
+* list item design updates
+
+### Features
+
+* list item design updates ([b281389](https://github.com/BonnierNews/dn-design-system/commit/b2813893022fc7d95ac070a85ee53db81a60b6a9))
+
 ## [17.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.2.1...@bonniernews/dn-design-system-web@17.0.0) (2024-07-19)
 
 

package/components/buddy-menu/buddy-menu.scss

@@ -85,7 +85,7 @@
     border-bottom-right-radius: ds-border-radius(x2);
     overflow: hidden;
     margin: 0;
-    padding: 0;
+    padding: ds-spacing(0 $ds-s-100);
   }
 
   &.ds-force-px {

package/components/byline/byline.njk

@@ -1,47 +1,11 @@
 {% 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 %}
-{% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
+{% from '@bonniernews/dn-design-system-web/components/list-item/list-item.njk' import ListItem %}
 
 {% macro Byline(params) %}
-  {% set componentClassName = "ds-byline" %}
-  <li class="{{ componentClassName + '__outer'}}">
-    {% call BylineInner(params, componentClassName) %}
-      <div class="{{ componentClassName + '__inner'}}">
-        {% set componentClassName = componentClassName %}
-        {% call BylineContent(params, componentClassName, useOuterAnchorElement) %}
-          {% if params.bylineImage %}
-            <span class="{{ componentClassName + '__image'}}">{{- params.bylineImage | safe -}}</span>
-          {% endif %}
-          <div class="{{ componentClassName + '__titles'}}">
-            {% if params.authorName %}
-              <span class="{{ componentClassName + '__title'}}">{{ params.authorName }}</span>
-            {% endif %}
-            {%- if subtitle %}
-              <span class="{{ componentClassName + '__subtitle'}}">{{ subtitle }}</span>
-            {% endif %}
-          </div>
-        {% endcall %}
-        {% if useArrowIcon %}
-          <span class="{{ componentClassName + '__icon-right'}}">{{- IconUse({ icon: 'arrow_forward' }) | safe -}}</span>
-        {% elif useFollowButton %}
-          {{ ButtonToggle({
-            text: "Följ",
-            selectedText: "Följer",
-            selected: params.followed,
-            variant: "secondary",
-            size: "small",
-            attributes: params.elementAttributes,
-            classNames: elementClassNames | join(" "),
-            forcePx: params.forcePx
-          })}}
-        {% endif %}
-      </div>
-    {% endcall %}
-  </li>
-{% endmacro %}
+  {% 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) %}
 
-{# Internal helper macro - not intended for use outside of this file #}
-{% macro BylineContent(params, componentClassName, useOuterAnchorElement) %}
   {% if params.variant == 'link' %}
     {% set subtitle = params.role %}
   {% elif params.variant == 'follow' %}
@@ -50,54 +14,24 @@
     {% set subtitle = false %}
   {% endif %}
 
-  {# This inner link can exist in combination with a button. It's been decided that it should only be used for authorPageUrls, not for email #}
-  {% if not useOuterAnchorElement and params.authorPageUrl %}
-    {% set linkAttributes = getAttributes(params.linkAttributes) %}
-    {%- set ariaLabel = 'aria-label="Läs mer från ' + params.authorName + '"' %}
-    <a href="{{params.authorPageUrl}}" {{- linkAttributes | safe }} {{ ariaLabel | safe if not params.email }} class="{{ componentClassName + '__content-wrapper'}}">
-      {{ caller() if caller }}
-    </a>
-  {% else %}
-    <div class="{{ componentClassName + '__content-wrapper'}}">
-      {{ caller() if caller }}
-    </div>
-  {% endif %}
-{% endmacro %}
-
-{# Internal helper macro - not intended for use outside of this file #}
-{% macro BylineInner(params, componentClassName) %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set attributes = getAttributes(params.attributes) %}
-
-  {% set useOuterAnchorElement = true if (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) %}
-
-  {%- set classes = [
-    componentClassName,
-    "ds-force-px" if params.forcePx,
-    classNamePrefix + "noninteractive" if not params.authorPageUrl,
-    classNamePrefix + params.variant,
-    params.classNames if params.classNames
-  ] | join(" ") %}
-
-  {% if params.bylineImage %}
-    {% set bylineImage =  params.bylineImage %}
-  {% endif %}
-
-  {% set elementClassNames = [ componentClassName + "__btn-toggle" ]%}
-  {% if params.elementClassNames %}
-    {% set elementClassNames = (elementClassNames.push(params.elementClassNames), elementClassNames) %}
-  {% endif %}
-
-  {% if useOuterAnchorElement %}
-    {% set linkAttributes = getAttributes(params.linkAttributes) %}
-    <a href="{{ params.authorPageUrl }}" aria-label="Läs mer från {{ params.authorName }}" class="{{ classes }}" {{- attributes | safe }} {{- linkAttributes | safe }}>
-      {{ caller() if caller }}
-    </a>
-  {% else %}
-    <div class="{{ classes }}" {{- attributes | safe }}>
-      {{ caller() if caller }}
-    </div>
-  {% endif %}
+  {% 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,
+    elementAttributes: params.elementAttributes,
+    elementClassNames: params.elementClassNames,
+    forcePx: params.forcePx,
+    classNames: classNames,
+    attributes: params.attributes
+  }) }}
 {% endmacro %}

package/components/byline/byline.scss

@@ -1,187 +1 @@
-@use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../../components/icon-sprite/icon-sprite.scss";
-@use "../../components/button-toggle/button-toggle.scss" as *;
-
-$ds-byline__icon-size: 24px;
-$ds-byline__image-size: 44px;
-$ds-byline__image-size--direkt: 36px;
-
-.ds-byline__outer {
-  list-style: none;
-  line-height: 0;
-}
-
-.ds-byline {
-  background-color: transparent;
-  border: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  width: 100%;
-  position: relative;
-
-  &::after {
-    content: "";
-    height: ds-border-width(x1);
-    width: calc(100% - ds-spacing($ds-s-200));
-    background-color: $ds-color-border-primary;
-    position: absolute;
-    left: ds-spacing($ds-s-100);
-    bottom: 0;
-  }
-
-  .ds-byline__inner {
-    box-sizing: border-box;
-    border-radius: 0;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-    padding: ds-spacing($ds-s-100 $ds-s-100);
-    width: 100%;
-
-    &::before {
-      content: "";
-      border-radius: inherit;
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    }
-  }
-
-  .ds-byline__content-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-grow: 1;
-    text-decoration: none;
-
-    &:focus-visible {
-      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
-      outline-offset: 2px;
-    }
-  }
-
-  .ds-byline__image {
-    height: $ds-byline__image-size;
-    width: $ds-byline__image-size;
-    border-radius: 50%;
-    overflow: hidden;
-    margin-right: ds-spacing($ds-s-100);
-    background-color: $ds-color-component-primary-overlay;
-    flex-shrink: 0;
-  }
-
-  .ds-byline__titles {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    align-items: flex-start;
-    word-break: break-all;
-
-    .ds-byline__title {
-      @include ds-typography(
-        $ds-typography-functionalheading01,
-        $lineHeight: $ds-lineheight-m,
-        $fontWeight: $ds-fontweight-semibold
-      );
-      @at-root .ds-force-px#{&} {
-        @include ds-typography(
-          $ds-typography-functionalheading01,
-          $forcePx: true,
-          $lineHeight: $ds-lineheight-m,
-          $fontWeight: $ds-fontweight-semibold
-        );
-      }
-      color: $ds-color-text-primary;
-      text-align: left;
-    }
-
-    .ds-byline__subtitle {
-      @include ds-typography($ds-typography-functionalbody02);
-      @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functionalbody02, true);
-      }
-      color: $ds-color-text-primary-02;
-      text-align: left;
-    }
-  }
-
-  .ds-byline__icon-right {
-    color: $ds-color-icon-primary;
-    display: inline-flex;
-    margin-left: ds-spacing($ds-s-100);
-
-    .ds-icon {
-      position: relative;
-      display: flex;
-      height: ds-px-to-rem($ds-byline__icon-size);
-      width: ds-px-to-rem($ds-byline__icon-size);
-      margin: 0;
-      @at-root .ds-force-px#{&} {
-        height: $ds-byline__icon-size;
-        width: $ds-byline__icon-size;
-      }
-      svg {
-        fill: currentColor;
-      }
-    }
-  }
-
-  .ds-byline__btn-toggle {
-    margin-left: ds-spacing($ds-s-100);
-  }
-
-  @include ds-hover() {
-    &:hover:not(.ds-byline--noninteractive) {
-      cursor: pointer;
-
-      .ds-byline__inner::before {
-        background-color: $ds-color-component-primary-overlay;
-      }
-    }
-  }
-
-  &.ds-byline--direkt {
-    .ds-byline__titles {
-      .ds-byline__subtitle {
-        line-height: ds-spacing($ds-s-100);
-      }
-    }
-    .ds-byline__image {
-      height: $ds-byline__image-size--direkt;
-      width: $ds-byline__image-size--direkt;
-    }
-
-    .ds-byline__btn-toggle {
-      min-height: $ds-byline__image-size--direkt;
-    }
-
-    .ds-byline__inner {
-      padding-top: ds-spacing($ds-s-075);
-      padding-bottom: ds-spacing($ds-s-075);
-    }
-  }
-
-  &:active:not(.ds-byline--noninteractive) .ds-byline__inner::before {
-    background-color: $ds-color-component-primary-overlay-02;
-  }
-  &:focus-visible {
-    outline: none;
-    .ds-byline__inner {
-      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
-      outline-offset: -2px;
-    }
-  }
-
-  @at-root a#{&} {
-    box-sizing: border-box;
-    text-align: center;
-    text-decoration: none;
-  }
-}
+@use "../../components/list-item/list-item.scss";

package/components/list-item/list-item.js

@@ -28,6 +28,6 @@ function dsListItemToggle(toggleEl) {
 }
 
 function dsListItemAll() {
-  const listElements = Array.from(document.getElementsByClassName("ds-list-item"));
+  const listElements = Array.from(document.getElementsByClassName("ds-list-item__content"));
   dsListItem(listElements);
 }

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

@@ -7,39 +7,40 @@
 
 {% macro ListItem(params) %}
   {% set componentClassName = "ds-list-item" %}
-  <li class="{{ componentClassName + '__outer'}}">
+  <li class="{{ componentClassName }}{% if params.border %} {{componentClassName}}--border{% endif %}">
     {% call ListItemInner(params, componentClassName) %}
-      <div class="{{ componentClassName + '__inner'}}">
-        {% set componentClassName = componentClassName %}
-        {% if iconLeftSvg %}
-          <span class="{{ componentClassName + '__icon-left'}}">{{- iconLeftSvg | safe -}}</span>
-        {% endif %}
-        {% if params.listItemType == 'image' %}
-          <div class="{{ componentClassName + '__image'}}">{{ params.mediaHtml }}</div>
-        {% endif %}
-        {% if params.title %}
-          <div class="{{ componentClassName + '__titles'}}">
-            {% if params.titleHref and not params.disabled %}
-              {% set linkAttributes = getAttributes(params.linkAttributes) %}
-              <a class="{{ componentClassName + '__title'}}" href="{{ params.titleHref }}" {{ linkAttributes | safe }}>{{ params.title }}</a>
-            {% else %}
-              <span class="{{ componentClassName + '__title'}}">{{ params.title }}</span>
-            {% endif %}
-            {%- if params.subtitle %}
-              <span class="{{ componentClassName + '__subtitle'}}">{{ params.subtitle }}</span>
-            {% endif %}
-          </div>
-        {% endif %}
-        {% if params.meta %}
-          <span class="{{ componentClassName + '__meta'}}">{{ params.meta }}</span>
-        {% endif %}
-        {% if iconRightSvg %}
-          <span class="{{ componentClassName + '__icon-right'}}">{{- iconRightSvg | safe -}}</span>
-        {% endif %}
-        {% if elementRight %}
-          {{- elementRight | safe -}}
-        {% endif %}
-      </div>
+      {% set componentClassName = componentClassName %}
+      {% if iconLeftSvg %}
+        <span class="{{ componentClassName + '__icon-left'}}">{{- iconLeftSvg | safe -}}</span>
+      {% endif %}
+      {% if params.listItemType == 'image' %}
+        <div class="{{ componentClassName + '__image'}}">{{ params.mediaHtml }}</div>
+      {% endif %}
+      {% if params.listItemType == 'byline' and params.mediaHtml %}
+        <div class="{{ componentClassName + '__portrait'}}">{{ params.mediaHtml }}</div>
+      {% endif %}
+      {% if params.title %}
+        <div class="{{ componentClassName + '__titles'}}">
+          {% if params.titleHref and not params.disabled %}
+            {% set linkAttributes = getAttributes(params.linkAttributes) %}
+            <a class="{{ componentClassName + '__title'}}" href="{{ params.titleHref }}" {{ linkAttributes | safe }}>{{ params.title }}</a>
+          {% else %}
+            <span class="{{ componentClassName + '__title'}}">{{ params.title }}</span>
+          {% endif %}
+          {%- if params.subtitle %}
+            <span class="{{ componentClassName + '__subtitle'}}">{{ params.subtitle }}</span>
+          {% endif %}
+        </div>
+      {% endif %}
+      {% if params.meta %}
+        <span class="{{ componentClassName + '__meta'}}">{{ params.meta }}</span>
+      {% endif %}
+      {% if iconRightSvg %}
+        <span class="{{ componentClassName + '__icon-right'}}">{{- iconRightSvg | safe -}}</span>
+      {% endif %}
+      {% if elementRight %}
+        {{- elementRight | safe -}}
+      {% endif %}
     {% endcall %}
   </li>
 {% endmacro %}
@@ -66,9 +67,8 @@
   {% endif %}
 
   {%- set classes = [
-    componentClassName,
+    componentClassName + "__content",
     "ds-force-px" if params.forcePx,
-    classNamePrefix + "border" if params.border,
     classNamePrefix + "disabled" if params.disabled,
     variantClass,
     params.classNames if params.classNames
@@ -83,8 +83,7 @@
       {{ caller() if caller }}
     </button>
   {% elif element == 'checkbox' %}
-    <div class="{{ classes }}" {{- attributes | safe }}>
-      <label class="{{ componentClassName + '__wrapping-label'}}" for="{{ params.name }}"></label>
+    <label class="{{ classes }}" for="{{ params.name }}" {{- attributes | safe }}>
       {% set iconLeftSvg %}
         {{ Checkbox({
           name: params.name,
@@ -93,28 +92,27 @@
           disabled: params.disabled,
           forcePx: params.forcePx,
           stripLabel: true,
-          attributes: params.elementAttributes
+          attributes: params.elementAttributes,
+          classNames: params.elementClassNames
         })}}
       {% endset %}
       {{ caller() if caller }}
-    </div>
+    </label>
   {% elif element == 'radio' %}
-    <div class="{{ classes }}" {{- attributes | safe }}>
-      <label class="{{ componentClassName + '__wrapping-label'}}" for="{{ params.id }}"></label>
+    <label class="{{ classes }}" for="{{ params.id }}" {{- attributes | safe }}>
       {% set iconLeftSvg %}
         {{ RadioButton({
           name: params.name,
           condensed: true,
           disabled: params.disabled,
           forcePx: params.forcePx,
-          buttons: [{ id: params.id, checked: params.selected, attributes: params.elementAttributes }]
+          buttons: [{ id: params.id, checked: params.selected, attributes: params.elementAttributes, classNames: params.elementClassNames }]
         })}}
       {% endset %}
       {{ caller() if caller }}
-    </div>
+    </label>
   {% elif element == 'switch' %}
-    <div class="{{ classes }}" {{- attributes | safe }}>
-      <label class="{{ componentClassName + '__wrapping-label'}}" for="{{ params.name }}"></label>
+    <label class="{{ classes }}" for="{{ params.name }}" {{- attributes | safe }} >
       {% set iconRightSvg %}
         {{ Switch({
           name: params.name,
@@ -124,11 +122,12 @@
           disabled: params.disabled,
           forcePx: params.forcePx,
           stripLabel: true,
-          attributes: params.elementAttributes
+          attributes: params.elementAttributes,
+          classNames: params.elementClassNames
         })}}
       {% endset %}
       {{ caller() if caller }}
-    </div>
+    </label>
   {% elif element == 'accordion' %}
     {% set iconRightSvg %}
       {{ IconUse({ icon: "expand_less" }) }}
@@ -151,11 +150,38 @@
           disabled: params.disabled,
           forcePx: params.forcePx,
           size: "small",
-          attributes: params.elementAttributes
+          attributes: params.elementAttributes,
+          classNames: params.elementClassNames
         })}}
       {% endset %}
       {{ caller() if caller }}
     </div>
+  {% elif element == 'byline' %}
+    {% set elementRight %}
+      {% if params.toggleText %}
+        {{ ButtonToggle({
+          text: params.toggleText,
+          selected: params.selected,
+          selectedText: params.toggleSelectedText,
+          variant: params.variant | default("secondary"),
+          disabled: params.disabled,
+          forcePx: params.forcePx,
+          size: "small",
+          attributes: params.elementAttributes,
+          classNames: params.elementClassNames
+        })}}
+      {% endif %}
+    {% endset %}
+    {% if params.href %}
+      {% set linkAttributes = getAttributes(params.linkAttributes) %}
+      <a href="{{ params.href }}" class="{{ classes }}" {{- attributes | safe }} {{- linkAttributes | safe }}>
+        {{ caller() if caller }}
+      </a>
+    {% else %}
+      <div class="{{ classes }}" {{- attributes | safe }}>
+        {{ caller() if caller }}
+      </div>
+    {% endif %}
   {% else %}
     <div class="{{ classes }}" {{- attributes | safe }}>
       {{ caller() if caller }}

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

@@ -6,59 +6,73 @@
 @use "../button-toggle/button-toggle.scss" as *;
 
 $ds-list-item__icon-size: 24px;
-
-.ds-list-item__outer {
-  list-style: none;
-  line-height: 0;
-  position: relative;
-}
+$ds-list-item__portrait-size: 44px;
+$ds-list-item__portrait-size--small: 36px;
 
 .ds-list-item {
-  cursor: pointer;
   background-color: transparent;
   border: 0;
-  display: inline-flex;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0;
   width: 100%;
+  list-style: none;
+  line-height: 0;
   position: relative;
 
-  .ds-list-item__inner {
+  &.ds-list-item--border:not(:last-of-type)::after {
+    content: "";
+    width: 100%;
+    height: ds-border-width(x1);
+    background: $ds-color-border-primary;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .ds-list-item__content {
     box-sizing: border-box;
     border-radius: 0;
     margin: 0;
     display: flex;
+    gap: ds-spacing($ds-s-100);
     align-items: center;
     justify-content: space-between;
-    position: relative;
-    padding: ds-spacing($ds-s-100 $ds-s-100);
+    padding: ds-spacing($ds-s-100 0);
     width: 100%;
+    border: none;
+    background: none;
 
-    &::before {
-      content: "";
-      border-radius: inherit;
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
+    &:active {
+      opacity: 0.6;
     }
+  }
 
-    .ds-icon {
-      position: relative;
-      display: flex;
-      height: ds-px-to-rem($ds-list-item__icon-size);
-      width: ds-px-to-rem($ds-list-item__icon-size);
-      margin: 0;
-      @at-root .ds-force-px#{&} {
-        height: $ds-list-item__icon-size;
-        width: $ds-list-item__icon-size;
-      }
-      svg {
-        fill: currentColor;
-      }
+  label.ds-list-item__content,
+  button.ds-list-item__content,
+  a.ds-list-item__content {
+    cursor: pointer;
+    @include ds-hover(true) {
+      opacity: 0.6;
+    }
+  }
+
+  a.ds-list-item__content {
+    text-decoration: none; /* full-element links are covered by the opacity hover effect - adding underlines makes it too busy */
+  }
+
+  .ds-icon {
+    position: relative;
+    display: flex;
+    height: ds-px-to-rem($ds-list-item__icon-size);
+    width: ds-px-to-rem($ds-list-item__icon-size);
+    margin: 0;
+    @at-root .ds-force-px#{&} {
+      height: $ds-list-item__icon-size;
+      width: $ds-list-item__icon-size;
+    }
+    svg {
+      fill: currentColor;
     }
   }
 
@@ -72,6 +86,7 @@ $ds-list-item__icon-size: 24px;
     flex-direction: column;
     flex-grow: 1;
     align-items: flex-start;
+    overflow-wrap: anywhere;
 
     .ds-list-item__title {
       @include ds-typography($ds-typography-functionalbody02);
@@ -82,12 +97,17 @@ $ds-list-item__icon-size: 24px;
       text-align: left;
     }
 
+    a.ds-list-item__title {
+      @include ds-link($ds-link-list);
+    }
+
     .ds-list-item__subtitle {
       @include ds-typography($ds-typography-functionalbody02);
       @at-root .ds-force-px#{&} {
         @include ds-typography($ds-typography-functionalbody02, true);
       }
       color: $ds-color-text-primary-02;
+      text-align: left;
     }
   }
 
@@ -97,17 +117,15 @@ $ds-list-item__icon-size: 24px;
       @include ds-typography($ds-typography-functionalbody01, true);
     }
     color: $ds-color-text-primary-02;
-    margin-left: ds-spacing($ds-s-100);
+    text-align: right;
   }
 
   .ds-list-item__icon-left {
     display: inline-flex;
-    margin-right: ds-spacing($ds-s-100);
   }
 
   .ds-list-item__icon-right {
     display: inline-flex;
-    margin-left: ds-spacing($ds-s-100);
   }
 
   .ds-list-item__image {
@@ -129,8 +147,6 @@ $ds-list-item__icon-size: 24px;
     }
 
     + .ds-list-item__titles {
-      margin-left: ds-spacing($ds-s-100);
-
       .ds-list-item__title {
         @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
 
@@ -141,15 +157,23 @@ $ds-list-item__icon-size: 24px;
     }
   }
 
-  @include ds-hover() {
-    &:hover:not(.ds-list-item--disabled) .ds-list-item__inner::before {
-      background-color: $ds-color-component-primary-overlay;
+  .ds-list-item__portrait {
+    border-radius: 50%;
+    overflow: hidden;
+    background-color: $ds-color-component-primary-overlay;
+    flex-shrink: 0;
+
+    .picture,
+    img {
+      width: ds-px-to-rem($ds-list-item__portrait-size);
+      height: ds-px-to-rem($ds-list-item__portrait-size);
     }
   }
 
   &:active:not(.ds-list-item--disabled) .ds-list-item__inner::before {
     background-color: $ds-color-component-primary-overlay;
   }
+
   &:focus-visible {
     outline: none;
     .ds-list-item__inner {
@@ -165,34 +189,15 @@ $ds-list-item__icon-size: 24px;
   }
 }
 
-.ds-list-item--border {
-  position: relative;
-
-  &::after,
-  &.ds-list-item--accordion-active + .ds-list-item__accordion-inner::after {
-    content: "";
-    height: ds-border-width(x1);
-    width: calc(100% - (ds-spacing($ds-s-100) * 2));
-    background-color: $ds-color-border-primary;
-    position: absolute;
-    left: ds-spacing($ds-s-100);
-    bottom: 0;
-  }
-
-  &.ds-list-item--accordion-active {
-    &::after {
-      background-color: transparent;
-    }
-  }
-}
-
 .ds-list-item--accordion {
-  .ds-list-item__inner .ds-icon--expand_less {
+  .ds-icon--expand_less {
     display: none;
   }
 
   @at-root .ds-list-item__accordion-inner {
     display: none;
+    padding: ds-spacing(0 $ds-s-050);
+    border-top: ds-border-width(x1) solid $ds-color-border-primary;
     ul {
       margin: 0;
       padding: 0;
@@ -200,40 +205,22 @@ $ds-list-item__icon-size: 24px;
   }
 
   &.ds-list-item--accordion-active {
-    .ds-list-item__inner .ds-icon--expand_less {
+    .ds-icon--expand_less {
       display: flex;
     }
-    .ds-list-item__inner .ds-icon--expand_more {
+    .ds-icon--expand_more {
       display: none;
     }
 
     & + .ds-list-item__accordion-inner {
       display: block;
-      position: relative;
     }
   }
 }
 
 .ds-list-item--disabled {
   cursor: not-allowed;
-  .ds-list-item__titles .ds-list-item__title,
-  .ds-list-item__titles .ds-list-item__subtitle {
-    color: $ds-color-text-disabled;
-  }
-  .ds-list-item__icon-left,
-  .ds-list-item__icon-right {
-    color: $ds-color-icon-disabled;
-  }
-
-  .ds-list-item__wrapping-label::after {
-    cursor: not-allowed;
-  }
-  .ds-list-item__inner {
-    color: $ds-color-icon-disabled;
-    &::before {
-      background-color: unset;
-    }
-  }
+  opacity: 0.5;
 }
 
 .ds-list-item--accordion .ds-checkbox__accordion,
@@ -252,34 +239,42 @@ $ds-list-item__icon-size: 24px;
   }
 }
 
-.ds-list-item__wrapping-label {
-  &::after {
-    content: "";
+.ds-list-item--toggle {
+  a {
+    @include ds-link($ds-link-list);
+    display: block;
     width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    cursor: pointer;
   }
 }
 
-.ds-list-item--toggle {
-  cursor: default;
-  .ds-list-item__inner {
-    display: flex;
-    padding: ds-spacing(0 0 0 $ds-s-100);
-  }
+.ds-list-item--byline {
   .ds-list-item__titles {
-    padding: ds-spacing($ds-s-100) 0;
-  }
-  .ds-btn--toggle {
-    margin: ds-spacing(0 $ds-s-100 0 $ds-s-100);
+    .ds-list-item__title {
+      @include ds-typography(
+        $ds-typography-functionalheading01,
+        $lineHeight: $ds-lineheight-m,
+        $fontWeight: $ds-fontweight-semibold
+      );
+      @at-root .ds-force-px#{&} {
+        @include ds-typography(
+          $ds-typography-functionalheading01,
+          $forcePx: true,
+          $lineHeight: $ds-lineheight-m,
+          $fontWeight: $ds-fontweight-semibold
+        );
+      }
+    }
   }
-  a {
-    @include ds-link($ds-link-list);
-    display: block;
-    width: 100%;
+
+  &.ds-byline--direkt {
+    padding: ds-spacing($ds-s-075 0);
+
+    .ds-list-item__portrait {
+      .picture,
+      img {
+        width: ds-px-to-rem($ds-list-item__portrait-size--small);
+        height: ds-px-to-rem($ds-list-item__portrait-size--small);
+      }
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "17.0.0",
+  "version": "18.0.0-beta.0",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",