@bonniernews/dn-design-system-web 31.2.4 → 31.4.0

package/CHANGELOG.md

@@ -4,6 +4,54 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [31.4.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.3.0...@bonniernews/dn-design-system-web@31.4.0) (2025-04-16)
+
+
+### Features
+
+* **web:** support byline in standardteaser ([#1698](https://github.com/BonnierNews/dn-design-system/issues/1698)) ([12556b9](https://github.com/BonnierNews/dn-design-system/commit/12556b9390f7d219a93181733d19f59cbde4b3ca))
+
+
+### Bug Fixes
+
+* **app:** do not set animatedStyle on disabled PressableOpacity ([#1707](https://github.com/BonnierNews/dn-design-system/issues/1707)) ([fe84072](https://github.com/BonnierNews/dn-design-system/commit/fe840728c8e7e9a261f4536f66fa9801aa787be7))
+
+
+### Maintenance
+
+* **deps-dev:** bump @react-native/metro-config from 0.75.2 to 0.79.1 ([#1704](https://github.com/BonnierNews/dn-design-system/issues/1704)) ([bf31863](https://github.com/BonnierNews/dn-design-system/commit/bf31863996356a3d43f82db8b657c352e0f87693))
+* prerelease packages ([2a7fd96](https://github.com/BonnierNews/dn-design-system/commit/2a7fd96de28bdf59eeaec12f36cc087293ee3cc9))
+* prerelease packages ([c3f4952](https://github.com/BonnierNews/dn-design-system/commit/c3f4952621f1050ca6dad69fa7f496c9623c2044))
+* **web:** change to old token for checkout ([#1701](https://github.com/BonnierNews/dn-design-system/issues/1701)) ([d7fc4c5](https://github.com/BonnierNews/dn-design-system/commit/d7fc4c58e3bb84d9fa312be6d55c4e3379b96c19))
+* **web:** debug screenshot update ([#1700](https://github.com/BonnierNews/dn-design-system/issues/1700)) ([4b56a40](https://github.com/BonnierNews/dn-design-system/commit/4b56a4008ae6aff0974b43d57791d4f89d4d884d))
+* **web:** revert snapshot updates ([#1702](https://github.com/BonnierNews/dn-design-system/issues/1702)) ([769b39f](https://github.com/BonnierNews/dn-design-system/commit/769b39f73735a3e899807b47d3b7825cc3a139c5))
+
+## [31.3.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.2.5...@bonniernews/dn-design-system-web@31.3.0) (2025-04-14)
+
+
+### Features
+
+* **web:** break long words in split teaser ([#1684](https://github.com/BonnierNews/dn-design-system/issues/1684)) ([dfa70a6](https://github.com/BonnierNews/dn-design-system/commit/dfa70a6ceda7fd525d28636fa09a8b2f424ca467))
+
+## [31.2.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.2.4...@bonniernews/dn-design-system-web@31.2.5) (2025-04-11)
+
+
+### Bug Fixes
+
+* **app:** medium fontweight Button ([#1686](https://github.com/BonnierNews/dn-design-system/issues/1686)) ([392b0cb](https://github.com/BonnierNews/dn-design-system/commit/392b0cbb277868241c902c3096f3fc6b26b20dd2))
+
+
+### Maintenance
+
+* **deps-dev:** bump @babel/runtime from 7.26.10 to 7.27.0 ([#1676](https://github.com/BonnierNews/dn-design-system/issues/1676)) ([3ccfb79](https://github.com/BonnierNews/dn-design-system/commit/3ccfb79956ad5fb3dd3b5e37284b66a1f7219f8b))
+* **deps-dev:** bump axios from 1.8.3 to 1.8.4 ([#1673](https://github.com/BonnierNews/dn-design-system/issues/1673)) ([109626a](https://github.com/BonnierNews/dn-design-system/commit/109626ad5a55ed72ade512fdc637d5467e2e986c))
+* **deps:** bump @babel/core from 7.26.9 to 7.26.10 ([#1674](https://github.com/BonnierNews/dn-design-system/issues/1674)) ([3c3f13b](https://github.com/BonnierNews/dn-design-system/commit/3c3f13bc6fd2a717df6fb246926270e5b464f7cf))
+* **deps:** bump image-size from 1.1.1 to 1.2.1 ([#1682](https://github.com/BonnierNews/dn-design-system/issues/1682)) ([a72069f](https://github.com/BonnierNews/dn-design-system/commit/a72069f588010790e8a3948b10ea4aea9a74a778))
+* **deps:** bump sass from 1.85.1 to 1.86.3 ([#1687](https://github.com/BonnierNews/dn-design-system/issues/1687)) ([f9d6b2d](https://github.com/BonnierNews/dn-design-system/commit/f9d6b2dffe546b265827b4ac45d2eaa7a5da8a8c))
+* **foundations:** update variables from Figma ([#1690](https://github.com/BonnierNews/dn-design-system/issues/1690)) ([5a02617](https://github.com/BonnierNews/dn-design-system/commit/5a02617feeb8bab5625efdcf58e180595f344294))
+* prerelease packages ([8ea072c](https://github.com/BonnierNews/dn-design-system/commit/8ea072cbb2df3b10d3fdb422403784dab24be9a6))
+* prerelease packages ([80145b7](https://github.com/BonnierNews/dn-design-system/commit/80145b7da82f182783a16d2484e2a39edcaf3fd3))
+
 ## [31.2.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.2.3...@bonniernews/dn-design-system-web@31.2.4) (2025-03-27)
 
 

package/assets/teaser/teaser.scss

@@ -81,6 +81,44 @@ $ds-teaser-standard-image-width-desktop: 196px;
     }
   }
 
+  .ds-teaser__byline {
+    overflow: hidden;
+    position: relative;
+    margin-left: ds-spacing($ds-s-100);
+    margin-bottom: ds-spacing($ds-s-100, "px", true);
+    margin-top: ds-spacing($ds-s-025);
+
+    .picture {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      min-width: 100%;
+      margin: auto 0 0;
+      max-height: 100%;
+
+      .picture__img {
+        margin: 0;
+        object-position: top;
+        max-height: unset;
+      }
+    }
+
+    @include ds-mq-largest-breakpoint(mobile) {
+      width: 96px;
+      min-height: 96px;
+      margin-left: ds-spacing($ds-s-050);
+    }
+
+    @include ds-mq-smallest-breakpoint(tablet) {
+      width: 144px;
+      // En bylinebild bör va lika hög som en "grekisk byst" - man ska se lite skjortkrage!
+      min-height: 110px;
+      margin-left: ds-spacing($ds-s-100);
+    }
+  }
+
   &--podcast {
     .ds-teaser__vignette {
       display: flex;

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

@@ -64,44 +64,6 @@
     }
   }
 
-  .ds-teaser__byline {
-    overflow: hidden;
-    position: relative;
-    margin-left: ds-spacing($ds-s-100);
-    margin-bottom: ds-spacing($ds-s-100, "px", true);
-    margin-top: ds-spacing($ds-s-025);
-
-    .picture {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      min-width: 100%;
-      margin: auto 0 0;
-      max-height: 100%;
-
-      .picture__img {
-        margin: 0;
-        object-position: top;
-        max-height: unset;
-      }
-    }
-
-    @include ds-mq-largest-breakpoint(mobile) {
-      width: 96px;
-      min-height: 96px;
-      margin-left: ds-spacing($ds-s-050);
-    }
-
-    @include ds-mq-smallest-breakpoint(tablet) {
-      width: 144px;
-      // En bylinebild bör va lika hög som en "grekisk byst" - man ska se lite skjortkrage!
-      min-height: 110px;
-      margin-left: ds-spacing($ds-s-100);
-    }
-  }
-
   @include ds-mq-smallest-breakpoint(tablet) {
     &.ds-teaser--right {
       .ds-teaser__title {

package/components/teaser-split/teaser-split.scss

@@ -31,7 +31,9 @@
     display: block;
     position: relative;
     flex: 1;
+    min-width: 0; // Keep teaser from becoming too wide when it contains long word.
     margin-right: ds-spacing($ds-s-100);
+
     &:last-child {
       margin-right: 0;
     }
@@ -73,6 +75,10 @@
       @include ds-typography($ds-typography-detail-teaser-twin);
     }
 
+    .ds-teaser__text {
+      overflow-wrap: break-word;
+    }
+
     .ds-teaser__media {
       margin-top: ds-spacing($ds-s-025);
 

package/components/teaser-standard/README.md

@@ -20,6 +20,7 @@
 |highlight | String | no | | | Text before the heading |
 |sticker | String | no | | | Red text before the text |
 |mediaHtml | HTML String | no | | | Main image or other media |
+|bylineHtml | HTML String | no | | | Side image of the author |
 |isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
 |isCompact | bool | no | true, false | false | If the headline should be compact |
 |isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |

package/components/teaser-standard/teaser-standard.js

@@ -8,13 +8,16 @@ function dsTeaserStandard(params = {}) {
   // NOTE: this should match output of teaser-standard.njk for a subset of the parameters
   teaser.innerHTML = `
     <div class="ds-teaser__content">
-      <div class="ds-teaser__title"></div>
-      <p class="ds-teaser__text">
-        <span class="ds-teaser-dot"></span>
-      </p>
+      <div class="ds-teaser__content-inner">
+        <div class="ds-teaser__title"></div>
+        <p class="ds-teaser__text">
+          <span class="ds-teaser-dot"></span>
+        </p>
+      </div>
     </div>`;
   teaser.classList.add("ds-teaser");
   teaser.classList.add("ds-teaser--standard");
+  teaser.classList.add("ds-teaser--standard-without-byline");
 
   if (params.targetLink) {
     teaser.setAttribute("href", params.targetLink)

package/components/teaser-standard/teaser-standard.njk

@@ -11,6 +11,9 @@
     "ds-teaser--standard",
     classNamePrefix + params.variant if params.variant,
     classNamePrefix + "compact" if params.isCompact,
+    classNamePrefix + "standard-with-byline" if params.bylineHtml,
+    classNamePrefix + "standard-without-byline" if not params.bylineHtml,
+    classNamePrefix + "standard-with-vignette" if params.vignette,
     params.classNames if params.classNames
   ] | join(" ") %}
 
@@ -22,58 +25,66 @@
     classNames: extraClasses
   }) %}
     <div class="{{ componentClassName + '__content'}}">
-      {% if params.mediaHtml %}
-        {% set mediaClass = [
-          componentClassName + '__media',
-          componentClassName + '__media--rounded' if not params.isItalicHeadline,
-          componentClassName + '__media--square-image' if params.isSquareImage
-        ] | join(" ") %}
-        <div class="{{ mediaClass }}">
-          {{ params.mediaHtml }}
-        </div>
-      {% endif %}
-
-      {% if params.vignette %}
-        <div class="ds-teaser__vignette">
-          {% if params.variant === "podcast" %}
-            {{ IconUse({ icon: "headphones" }) }}
-          {% endif %}
-          {{ params.vignette }}
-        </div>
-      {% endif %}
+      <div class="ds-teaser__content-inner">
+        {% if params.mediaHtml and not params.bylineHtml %}
+          {% set mediaClass = [
+            componentClassName + '__media',
+            componentClassName + '__media--rounded' if not params.isItalicHeadline,
+            componentClassName + '__media--square-image' if params.isSquareImage
+          ] | join(" ") %}
+          <div class="{{ mediaClass }}">
+            {{ params.mediaHtml }}
+          </div>
+        {% endif %}
 
-      <h2 class="{{ componentClassName + '__title'}} {{ componentClassName  + '__title--italic' if params.isItalicHeadline}}">
-        {% if params.highlight %}
-          <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
+        {% if params.vignette %}
+          <div class="ds-teaser__vignette">
+            {% if params.variant === "podcast" %}
+              {{ IconUse({ icon: "headphones" }) }}
+            {% endif %}
+            {{ params.vignette }}
+          </div>
         {% endif %}
-        {{ params.title }}
-      </h2>
 
-      {% if params.text and params.areaType !== "right" %}
-        <p class="{{ componentClassName + '__text' }}">
-          {% if params.sticker %}
-            {{ TeaserDot({ flashing: params.isFlashingDot }) }}
-            <span class="ds-teaser__sticker">
-              {{ params.sticker }}
-            </span>
+        <h2 class="{{ componentClassName + '__title'}} {{ componentClassName  + '__title--italic' if params.isItalicHeadline}}">
+          {% if params.highlight %}
+            <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
           {% endif %}
-          {{ params.text }}
-        </p>
-      {% endif %}
-      {% if params.variant === "podcast" %}
-        {{ TeaserFooter({
-          variant: "podcast",
-          publicationTime: params.publicationTime,
-          duration: params.duration
-        })}}
-      {% elif params.publicationTime %}
-        {{
-          TeaserFooter({
-            variant: "informationText",
+          {{ params.title }}
+        </h2>
+
+        {% if params.text and params.areaType !== "right" %}
+          <p class="{{ componentClassName + '__text' }}">
+            {% if params.sticker %}
+              {{ TeaserDot({ flashing: params.isFlashingDot }) }}
+              <span class="ds-teaser__sticker">
+                {{ params.sticker }}
+              </span>
+            {% endif %}
+            {{ params.text }}
+          </p>
+        {% endif %}
+        {% if params.variant === "podcast" %}
+          {{ TeaserFooter({
+            variant: "podcast",
             publicationTime: params.publicationTime,
-            sectionName: params.sectionName
-          })
-        }}
+            duration: params.duration
+          })}}
+        {% elif params.publicationTime %}
+          {{
+            TeaserFooter({
+              variant: "informationText",
+              publicationTime: params.publicationTime,
+              sectionName: params.sectionName
+            })
+          }}
+        {% endif %}
+      </div>
+
+      {% if params.bylineHtml %}
+        <div class="{{ componentClassName + '__byline'}}">
+          {{ params.bylineHtml | safe }}
+        </div>
       {% endif %}
     </div>
   {% endcall %}

package/components/teaser-standard/teaser-standard.scss

@@ -6,7 +6,7 @@
   overflow: hidden;
 
   .ds-teaser__vignette {
-    margin-top: ds-spacing($ds-s-025);
+    padding-top: ds-spacing($ds-s-025);
   }
 
   .ds-teaser__title {
@@ -25,15 +25,50 @@
         @include ds-typography($ds-typography-detail-teaser-standard-compact-opinion);
       }
     }
+
+    @include ds-hover(true) {
+      .ds-teaser__title {
+        @include ds-underline(2px);
+      }
+    }
   }
 
-  .ds-teaser__media,
-  .ds-teaser__content {
-    margin-bottom: ds-spacing($ds-s-100);
+  &.ds-teaser--standard-without-byline {
+    .ds-teaser__media,
+    .ds-teaser__content {
+      margin-bottom: ds-spacing($ds-s-100);
+    }
+
+    .ds-teaser__content .ds-teaser__content-inner {
+      display: block;
+    }
+  }
+
+  &.ds-teaser--standard-with-byline {
+    .ds-teaser__content .ds-teaser__content-inner {
+      padding-bottom: ds-spacing($ds-s-075);
+    }
+  }
+
+  @include ds-hover(true) {
+    .ds-teaser__title {
+      @include ds-underline(3px);
+    }
   }
 
   .ds-teaser__content {
-    display: block;
+    display: flex;
+    flex-direction: row;
+
+    .ds-teaser__content-inner {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+  }
+
+  .ds-teaser__byline {
+    float: right;
   }
 
   .ds-teaser__media {

package/foundations/variables/colorsDnLight.scss

@@ -1,4 +1,4 @@
-$ds-hex-surface-foreground: #f8f8f8;
+$ds-hex-surface-foreground: #f2f2f2;
 $ds-hex-surface-primary: #ffffff;
 $ds-hex-surface-primary-raised-soft: #f2f2f2;
 $ds-hex-surface-primary-raised-strong: #e5e5e5;

package/package.json

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

package/variables/colors-light-mode.json

@@ -1,6 +1,6 @@
 {
   "surface": {
-    "foreground": "#f8f8f8",
+    "foreground": "#f2f2f2",
     "primary": "#ffffff",
     "primary-raised-soft": "#f2f2f2",
     "primary-raised-strong": "#e5e5e5",