@bonniernews/dn-design-system-web 18.0.0-beta.1 → 18.0.0-beta.3

package/CHANGELOG.md

@@ -4,6 +4,26 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [18.0.0-beta.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@17.0.1...@bonniernews/dn-design-system-web@18.0.0-beta.3) (2024-08-15)
+
+
+### ⚠ BREAKING CHANGES
+
+* list item design updates
+
+### Features
+
+* list item design updates ([a119b7d](https://github.com/BonnierNews/dn-design-system/commit/a119b7d47f52b157c209935b4960aa48410ba0f4))
+
+
+### Maintenance
+
+* **web:** released version v18.0.0-beta.0 ([4f6d248](https://github.com/BonnierNews/dn-design-system/commit/4f6d2484339540563d3362582711fcb100a4d7ea))
+* **web:** released version v18.0.0-beta.1 ([6060412](https://github.com/BonnierNews/dn-design-system/commit/606041274b8a84a22472d60b3509cac7570c0398))
+* **web:** released version v18.0.0-beta.2 ([a231ec1](https://github.com/BonnierNews/dn-design-system/commit/a231ec12b8722b50ca1d02205b02d62348d16aa6))
+
+## [18.0.0-beta.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@18.0.0-beta.1...@bonniernews/dn-design-system-web@18.0.0-beta.2) (2024-08-14)
+
 ## [18.0.0-beta.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@18.0.0-beta.0...@bonniernews/dn-design-system-web@18.0.0-beta.1) (2024-08-13)
 
 ## [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)
@@ -17,6 +37,28 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 * list item design updates ([b281389](https://github.com/BonnierNews/dn-design-system/commit/b2813893022fc7d95ac070a85ee53db81a60b6a9))
 
+
+## [17.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@17.0.0...@bonniernews/dn-design-system-web@17.0.1) (2024-08-14)
+
+
+### Bug Fixes
+
+* **web:** adjust text color on brand btn ([#1356](https://github.com/BonnierNews/dn-design-system/issues/1356)) ([55db3cc](https://github.com/BonnierNews/dn-design-system/commit/55db3cc0e36d1acce67225c106e8e8fde18d50c6))
+
+
+### Maintenance
+
+* **deps-dev:** bump axios from 1.4.0 to 1.6.0 in /scripts ([#1312](https://github.com/BonnierNews/dn-design-system/issues/1312)) ([b600333](https://github.com/BonnierNews/dn-design-system/commit/b600333a4c77ea5149f7bd423ff2da65dad83900))
+* **deps:** bump @babel/core from 7.22.11 to 7.25.2 ([#1350](https://github.com/BonnierNews/dn-design-system/issues/1350)) ([034de0e](https://github.com/BonnierNews/dn-design-system/commit/034de0e93504bf6ba806b6dc6f0c3bce13615f17))
+* **deps:** bump @figspec/components from 1.0.2 to 1.0.3 ([#1330](https://github.com/BonnierNews/dn-design-system/issues/1330)) ([79bef36](https://github.com/BonnierNews/dn-design-system/commit/79bef36d2b9ef0c40cf2a8519638dff12e8c33d2))
+* **deps:** bump @tsconfig/react-native from 3.0.2 to 3.0.5 ([#1352](https://github.com/BonnierNews/dn-design-system/issues/1352)) ([f1be5c9](https://github.com/BonnierNews/dn-design-system/commit/f1be5c9eebba40f1c1ac5c2aa35c6d54a341d311))
+* **deps:** bump braces from 3.0.2 to 3.0.3 in /web ([#1348](https://github.com/BonnierNews/dn-design-system/issues/1348)) ([49e3ad6](https://github.com/BonnierNews/dn-design-system/commit/49e3ad61dd411e16cbc2bc9dae82b11029834f2b))
+* **deps:** bump express from 4.17.2 to 4.19.2 in /server ([#1264](https://github.com/BonnierNews/dn-design-system/issues/1264)) ([75ceb81](https://github.com/BonnierNews/dn-design-system/commit/75ceb81978e64daad3c8e55d316839db1b3e8a1f))
+* **deps:** bump fast-loops from 1.1.3 to 1.1.4 ([#1334](https://github.com/BonnierNews/dn-design-system/issues/1334)) ([67341de](https://github.com/BonnierNews/dn-design-system/commit/67341de5cbe6c1e22b6658242f43b610acc07a31))
+* **deps:** bump fast-xml-parser from 4.2.7 to 4.4.1 ([#1344](https://github.com/BonnierNews/dn-design-system/issues/1344)) ([81dea97](https://github.com/BonnierNews/dn-design-system/commit/81dea9741edc52845be435858055b58782e773cd))
+* **deps:** bump react-native-web from 0.17.7 to 0.19.12 ([#1314](https://github.com/BonnierNews/dn-design-system/issues/1314)) ([7b346f1](https://github.com/BonnierNews/dn-design-system/commit/7b346f10860757896a2754c171263a05bba57a04))
+* **deps:** bump typescript from 4.8.4 to 4.9.5 ([#1309](https://github.com/BonnierNews/dn-design-system/issues/1309)) ([e4a166e](https://github.com/BonnierNews/dn-design-system/commit/e4a166ec56ea82b5ddc05e427ba20439f194000f))
+
 ## [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/button/button.scss

@@ -54,7 +54,7 @@ $ds-btn-outlined__border-width: ds-border-width(x1);
     &.ds-btn--default,
     &.ds-btn--elevated {
       --ds-btn__background-color: #{$ds-color-component-brand};
-      --ds-btn__color: #{$ds-color-text-secondary};
+      --ds-btn__color: #{$ds-color-static-white};
     }
     &.ds-btn--outline {
       --ds-btn__border-color: #{$ds-color-component-brand};

package/components/byline/byline.njk

@@ -28,7 +28,8 @@
     href: params.authorPageUrl if useOuterAnchorElement,
     titleHref: params.authorPageUrl if not useOuterAnchorElement,
     linkAttributes: params.linkAttributes,
-    border: true,
+    border: params.variant !== 'direkt',
+    fontWeight: 'semibold',
     elementAttributes: params.elementAttributes,
     elementClassNames: params.elementClassNames,
     forcePx: params.forcePx,

package/components/list-item/README.md

@@ -16,6 +16,7 @@
 |meta | String | no | | | |
 |disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
 |border | bool | no | true, false | false | |
+|fontWeight | string | no | 'regular', 'semibold', 'bold' | 'regular' | only affects the title |
 |leadingIcon | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
 |trailingIcon | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
 |href | String | no | | | If href is set the list item will be rendered as an a-tag |

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

@@ -20,12 +20,13 @@
         <div class="{{ componentClassName + '__portrait'}}">{{ params.mediaHtml }}</div>
       {% endif %}
       {% if params.title %}
+        {% set titleClasses = [componentClassName + '__title', componentClassName + '__title--' + (params.fontWeight or 'regular')] | join(" ") %}
         <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>
+            <a class="{{ titleClasses }}" href="{{ params.titleHref }}" {{ linkAttributes | safe }}>{{ params.title }}</a>
           {% else %}
-            <span class="{{ componentClassName + '__title'}}">{{ params.title }}</span>
+            <span class="{{ titleClasses }}">{{ params.title }}</span>
           {% endif %}
           {%- if params.subtitle %}
             <span class="{{ componentClassName + '__subtitle'}}">{{ params.subtitle }}</span>

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

@@ -21,7 +21,7 @@ $ds-list-item__portrait-size--small: 36px;
   line-height: 0;
   position: relative;
 
-  &.ds-list-item--border:not(:last-of-type)::after {
+  &.ds-list-item--border::after {
     content: "";
     width: 100%;
     height: ds-border-width(x1);
@@ -42,10 +42,6 @@ $ds-list-item__portrait-size--small: 36px;
     width: 100%;
     border: none;
     background: none;
-
-    &:active {
-      opacity: 0.6;
-    }
   }
 
   label.ds-list-item__content,
@@ -55,6 +51,10 @@ $ds-list-item__portrait-size--small: 36px;
     @include ds-hover(true) {
       opacity: 0.6;
     }
+
+    &:active {
+      opacity: 0.6;
+    }
   }
 
   a.ds-list-item__content {
@@ -89,12 +89,47 @@ $ds-list-item__portrait-size--small: 36px;
     overflow-wrap: anywhere;
 
     .ds-list-item__title {
-      @include ds-typography($ds-typography-functionalbody02);
+      @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-m);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functionalbody02, true);
+        @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-m, $forcePx: true);
       }
+
       color: $ds-color-text-primary;
       text-align: left;
+
+      &.ds-list-item__title--semibold {
+        @include ds-typography(
+          $ds-typography-functionalbody02,
+          $lineHeight: $ds-lineheight-m,
+          $fontWeight: $ds-fontweight-semibold
+        );
+
+        @at-root .ds-force-px#{&} {
+          @include ds-typography(
+            $ds-typography-functionalbody02,
+            $lineHeight: $ds-lineheight-m,
+            $forcePx: true,
+            $fontWeight: $ds-fontweight-semibold
+          );
+        }
+      }
+
+      &.ds-list-item__title--bold {
+        @include ds-typography(
+          $ds-typography-functionalbody02,
+          $lineHeight: $ds-lineheight-m,
+          $fontWeight: $ds-fontweight-bold
+        );
+
+        @at-root .ds-force-px#{&} {
+          @include ds-typography(
+            $ds-typography-functionalbody02,
+            $lineHeight: $ds-lineheight-m,
+            $forcePx: true,
+            $fontWeight: $ds-fontweight-bold
+          );
+        }
+      }
     }
 
     a.ds-list-item__title {
@@ -145,16 +180,6 @@ $ds-list-item__portrait-size--small: 36px;
     figure {
       margin: 0;
     }
-
-    + .ds-list-item__titles {
-      .ds-list-item__title {
-        @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
-
-        @at-root .ds-force-px#{&} {
-          @include ds-typography($ds-typography-functionalbody02, $forcePx: true, $fontWeight: $ds-fontweight-semibold);
-        }
-      }
-    }
   }
 
   .ds-list-item__portrait {
@@ -165,7 +190,7 @@ $ds-list-item__portrait-size--small: 36px;
 
     .picture,
     img {
-      width: ds-px-to-rem($ds-list-item__portrait-size);
+      width: $ds-list-item__portrait-size;
     }
   }
 
@@ -247,31 +272,13 @@ $ds-list-item__portrait-size--small: 36px;
 }
 
 .ds-list-item--byline {
-  .ds-list-item__titles {
-    .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
-        );
-      }
-    }
-  }
-
   &.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);
+        width: $ds-list-item__portrait-size--small;
       }
     }
   }

package/package.json

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