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

package/CHANGELOG.md

@@ -4,20 +4,60 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
-## [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)
+## [18.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@17.0.2...@bonniernews/dn-design-system-web@18.0.0) (2024-08-15)
 
 
 ### ⚠ BREAKING CHANGES
 
-* list item design updates
+* **web:** list item design updates and byline refactoring (#1346)
 
 ### Features
 
-* list item design updates ([b281389](https://github.com/BonnierNews/dn-design-system/commit/b2813893022fc7d95ac070a85ee53db81a60b6a9))
+* **web:** list item design updates and byline refactoring ([#1346](https://github.com/BonnierNews/dn-design-system/issues/1346)) ([83bfbeb](https://github.com/BonnierNews/dn-design-system/commit/83bfbeb7a45492c8e648f9b8422ecc44b229ee37))
+
+
+### Bug Fixes
+
+* **web:** improve storybook css for ArticleBodyImage on mobile ([#1355](https://github.com/BonnierNews/dn-design-system/issues/1355)) ([0090088](https://github.com/BonnierNews/dn-design-system/commit/00900886f091d0e5126786e84bbb920dbc45df74))
+
+
+### Maintenance
+
+* **web:** update incorrect action comment ([#1361](https://github.com/BonnierNews/dn-design-system/issues/1361)) ([dd454bf](https://github.com/BonnierNews/dn-design-system/commit/dd454bf1a1befca6566ce9cdf1b46a737f6a5b7b))
+
+## [17.0.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@17.0.1...@bonniernews/dn-design-system-web@17.0.2) (2024-08-15)
+
+
+### Bug Fixes
+
+* **web:** adjust byline teaser spacing ([#1360](https://github.com/BonnierNews/dn-design-system/issues/1360)) ([29ce4b4](https://github.com/BonnierNews/dn-design-system/commit/29ce4b464b96c5ed60099a72a234d48f59ebec1f))
+
+
+### Maintenance
+
+* **deps-dev:** bump axios from 1.6.0 to 1.7.4 ([#1358](https://github.com/BonnierNews/dn-design-system/issues/1358)) ([1d251eb](https://github.com/BonnierNews/dn-design-system/commit/1d251eb829624c1edbbbcb3d07eed0a6eb890c08))
+* **deps-dev:** bump axios from 1.6.0 to 1.7.4 in /scripts ([#1357](https://github.com/BonnierNews/dn-design-system/issues/1357)) ([ae75566](https://github.com/BonnierNews/dn-design-system/commit/ae75566b2ed63ed4ee6e31ac145909d0d2e59d89))
+
+## [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);
@@ -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 {
@@ -247,24 +272,6 @@ $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);
 

package/components/teaser-large/teaser-large.scss

@@ -64,14 +64,7 @@
     overflow: hidden;
     position: relative;
     margin-left: ds-spacing($ds-s-100);
-
-    // margin-bottom needs to be the negative value of padding-bottom on .ds-teaser__content
-    @include ds-mq-only-breakpoint(mobile) {
-      margin-bottom: ds-spacing($ds-s-075, "px", true);
-    }
-    @include ds-mq-smallest-breakpoint(tablet) {
-      margin-bottom: ds-spacing($ds-s-100, "px", true);
-    }
+    margin-bottom: ds-spacing($ds-s-100, "px", true);
 
     .picture {
       position: absolute;

package/package.json

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