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

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/foundations/helpers/typography.scss

@@ -8,11 +8,7 @@
 @use "../variables/typographyTokensScreenSmall.scss" as *;
 @use "../variables/typographyTokensScreenLarge.scss" as *;
 @use "../variables/typographyTokensScreenExtraLarge.scss" as *;
-@use "../variables/deprecated/typographyTokensScreenSmall.scss" as deprecatedSmall;
-@use "../variables/deprecated/typographyTokensScreenLarge.scss" as deprecatedLarge;
-@use "../variables/deprecated/typographyTokensScreenExtraLarge.scss" as deprecatedExtraLarge;
 @use "fontFamily.scss" as *;
-@forward "../variables/deprecated/typographyTokensList.scss";
 @forward "../variables/typographyTokensList.scss";
 @forward "../variables/typographyFontWeight.scss";
 @forward "../variables/typographyLetterSpacing.scss";
@@ -51,13 +47,6 @@ $dsSerifWeights: (
   black: 900,
 );
 
-$typographyTokensScreenSmall: map.merge($typographyTokensScreenSmall, deprecatedSmall.$typographyTokensScreenSmall);
-$typographyTokensScreenLarge: map.merge($typographyTokensScreenLarge, deprecatedLarge.$typographyTokensScreenLarge);
-$typographyTokensScreenExtraLarge: map.merge(
-  $typographyTokensScreenExtraLarge,
-  deprecatedExtraLarge.$typographyTokensScreenExtraLarge
-);
-
 // Serif variation changes, text 18px, headline 26px, display 34px. As fallback we will always use headline
 
 @mixin ds-typography(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "16.2.1",
+  "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",

package/foundations/variables/deprecated/typographyTokensList.scss

@@ -1,78 +0,0 @@
-$ds-typography-expressive-heading01regular: 'expressive-heading01regular';
-$ds-typography-expressive-heading01semibold: 'expressive-heading01semibold';
-$ds-typography-expressive-heading01bold: 'expressive-heading01bold';
-$ds-typography-expressive-heading01italicregular: 'expressive-heading01italicregular';
-$ds-typography-expressive-heading01italicsemibold: 'expressive-heading01italicsemibold';
-$ds-typography-expressive-heading01italicbold: 'expressive-heading01italicbold';
-$ds-typography-expressive-heading02regular: 'expressive-heading02regular';
-$ds-typography-expressive-heading02semibold: 'expressive-heading02semibold';
-$ds-typography-expressive-heading02bold: 'expressive-heading02bold';
-$ds-typography-expressive-heading02italicregular: 'expressive-heading02italicregular';
-$ds-typography-expressive-heading02italicsemibold: 'expressive-heading02italicsemibold';
-$ds-typography-expressive-heading02italicbold: 'expressive-heading02italicbold';
-$ds-typography-expressive-heading03regular: 'expressive-heading03regular';
-$ds-typography-expressive-heading03semibold: 'expressive-heading03semibold';
-$ds-typography-expressive-heading03bold: 'expressive-heading03bold';
-$ds-typography-expressive-heading03italicregular: 'expressive-heading03italicregular';
-$ds-typography-expressive-heading03italicsemibold: 'expressive-heading03italicsemibold';
-$ds-typography-expressive-heading03italicbold: 'expressive-heading03italicbold';
-$ds-typography-expressive-heading04regular: 'expressive-heading04regular';
-$ds-typography-expressive-heading04semibold: 'expressive-heading04semibold';
-$ds-typography-expressive-heading04bold: 'expressive-heading04bold';
-$ds-typography-expressive-heading04italicregular: 'expressive-heading04italicregular';
-$ds-typography-expressive-heading04italicsemibold: 'expressive-heading04italicsemibold';
-$ds-typography-expressive-heading04italicbold: 'expressive-heading04italicbold';
-$ds-typography-expressive-heading05regular: 'expressive-heading05regular';
-$ds-typography-expressive-heading05semibold: 'expressive-heading05semibold';
-$ds-typography-expressive-heading05bold: 'expressive-heading05bold';
-$ds-typography-expressive-heading05italicregular: 'expressive-heading05italicregular';
-$ds-typography-expressive-heading05italicsemibold: 'expressive-heading05italicsemibold';
-$ds-typography-expressive-heading05italicbold: 'expressive-heading05italicbold';
-$ds-typography-functional-heading01regular: 'functional-heading01regular';
-$ds-typography-functional-heading01semibold: 'functional-heading01semibold';
-$ds-typography-functional-heading01bold: 'functional-heading01bold';
-$ds-typography-functional-heading02regular: 'functional-heading02regular';
-$ds-typography-functional-heading02semibold: 'functional-heading02semibold';
-$ds-typography-functional-heading02bold: 'functional-heading02bold';
-$ds-typography-functional-heading03regular: 'functional-heading03regular';
-$ds-typography-functional-heading03semibold: 'functional-heading03semibold';
-$ds-typography-functional-heading03bold: 'functional-heading03bold';
-$ds-typography-functional-heading04regular: 'functional-heading04regular';
-$ds-typography-functional-heading04semibold: 'functional-heading04semibold';
-$ds-typography-functional-heading04bold: 'functional-heading04bold';
-$ds-typography-functional-heading05regular: 'functional-heading05regular';
-$ds-typography-functional-heading05semibold: 'functional-heading05semibold';
-$ds-typography-functional-heading05bold: 'functional-heading05bold';
-$ds-typography-expressive-preamble01regular: 'expressive-preamble01regular';
-$ds-typography-expressive-preamble01semibold: 'expressive-preamble01semibold';
-$ds-typography-expressive-preamble01bold: 'expressive-preamble01bold';
-$ds-typography-expressive-preamble01italicregular: 'expressive-preamble01italicregular';
-$ds-typography-expressive-preamble01italicsemibold: 'expressive-preamble01italicsemibold';
-$ds-typography-expressive-preamble01italicbold: 'expressive-preamble01italicbold';
-$ds-typography-expressive-body01regular: 'expressive-body01regular';
-$ds-typography-expressive-body01semibold: 'expressive-body01semibold';
-$ds-typography-expressive-body01bold: 'expressive-body01bold';
-$ds-typography-expressive-body01italicregular: 'expressive-body01italicregular';
-$ds-typography-expressive-body01italicsemibold: 'expressive-body01italicsemibold';
-$ds-typography-expressive-body01italicbold: 'expressive-body01italicbold';
-$ds-typography-expressive-body02regular: 'expressive-body02regular';
-$ds-typography-expressive-body02semibold: 'expressive-body02semibold';
-$ds-typography-expressive-body02bold: 'expressive-body02bold';
-$ds-typography-expressive-body02italicregular: 'expressive-body02italicregular';
-$ds-typography-expressive-body02italicsemibold: 'expressive-body02italicsemibold';
-$ds-typography-expressive-body02italicbold: 'expressive-body02italicbold';
-$ds-typography-functional-body01regular: 'functional-body01regular';
-$ds-typography-functional-body01semibold: 'functional-body01semibold';
-$ds-typography-functional-body01bold: 'functional-body01bold';
-$ds-typography-functional-body02regular: 'functional-body02regular';
-$ds-typography-functional-body02semibold: 'functional-body02semibold';
-$ds-typography-functional-body02bold: 'functional-body02bold';
-$ds-typography-functional-body03regular: 'functional-body03regular';
-$ds-typography-functional-body03semibold: 'functional-body03semibold';
-$ds-typography-functional-body03bold: 'functional-body03bold';
-$ds-typography-functional-meta01regular: 'functional-meta01regular';
-$ds-typography-functional-meta01semibold: 'functional-meta01semibold';
-$ds-typography-functional-meta01bold: 'functional-meta01bold';
-$ds-typography-functional-meta02regular: 'functional-meta02regular';
-$ds-typography-functional-meta02semibold: 'functional-meta02semibold';
-$ds-typography-functional-meta02bold: 'functional-meta02bold';